Semantica e titolo sezione link

**califfo** · 22-03-2006, 12:19

Ho un menu composto da vari elenchi UL. Ogni elenco si riferisce ad una certa sezione del sito.
Dal punto di vista semantico quale elemento dovrei usare per dare un titolo alla sezione ?

Tipo come in questo sito http://www.pastoralespiritualita.com/ per intenderci. Come vedete sul menu di sinistra c'è SEZIONI - COMUNITA' - NAVIGAZIONE, ecc ...

Io pensavo di utilizzare h3 in questo modo:

<div>
<h3>SEZIONE_1</h3>
<ul>[*][*][*][/list]

<ul>
<h3>SEZIONE_2</h3>
<ul>[*][*][*][/list]

<ul>
<h3>SEZIONE_3</h3>
<ul>[*][*][*][/list]

</div>

E' corretto secondo voi ?

**Mich_** · 22-03-2006, 12:31

L'idea sembra corretta, ma non completamente; e ci sono errori di sintassi.
Tutti i tag devono avere il corrispondente tag di chiusura: nel tuo codice ci sono dei <ul> non chiusi.

Patendo dal tuo esempio, posso proporti due varianti: a te (e a cosa vuoi rappresentare) la scelta.

codice:

<div>
<h3>SEZIONE_1</h3>
<ul>[*][*][*][/list]

<h3>SEZIONE_2</h3>
<ul>[*][*][*][/list]

<h3>SEZIONE_3</h3>
<ul>[*][*][*][/list]

</div>

codice:

<div><ul>[*]<h3>SEZIONE_1</h3>
  <ul>[*][*][*][/list]
[*]<h3>SEZIONE_2</h3>
  <ul>[*][*][*][/list]
[*]<h3>SEZIONE_3</h3>
  <ul>[*][*][*][/list]
[/list]
</div>

Oppure ciascun blocco <h3>+<ul...[*]...[/list]puo` essere racchiuso in un <div>

**pierofix** · 22-03-2006, 12:45

E' uno dei dubbi più fastidiosi, a questi livelli di approfondimento.

Io è da tanto che ci penso ma non ho ancora formato un'opinione soddisfacente.

Le poche conclusioni a cui sono giunto mi portano ad escludere l'utilizzo di intestazioni, preferendo piuttosto soluzioni simili:

utilizzare liste di definizione, ovvero le <dl>; un esempio per il tuo caso:

codice:

<dl>
   <dt>Sezione 1</dt>
      <dd>Link 1.1</dd>
      <dd>Link 1.2</dd>
   <dt>Sezione 2</dt>
      <dd>Link 2.1</dd>
      <dd>Link 2.2</dd>
</dl>

utilizzare un paragrafo, come nell'esempio:
codice:
```
Sezione 1:</p>
<ul>
```
Link 1.1
Link 1.2

**califfo** · 22-03-2006, 14:06

Innanzittutto grazie per le velocissime risposte ....

Allora Piero devo fare una cosa del tipo:

SEZIONE 1
Argomento1
Argomento2
Argomento3
...

SEZIONE 2
Argomento1
Argomento2
Argomento3
...

Esempio:

COMMUNIITY
Chat
Forum
Maliling List

e così via .... ho varie sezioni e anzichè racchiuderle in un unica lista UL voglio separarle per sezioni assegnando quindi un titolo per ogni sezione ...
Avevo anche pensato al tag

.... l'avevo però esclusa perchè pensavo non fosse una scelta semantica corretta ..
Sono indeciso quindi tra l'utilizzare i

oppure la soluzione con le liste annidate ..... però anche usare le liste di definizione non è male !!!!

**pierofix** · 22-03-2006, 14:13

Ti spiego perchè mi sento di escludere le intestazioni: semplicemente perchè le trovo esagerate per lo scopo. Io mi immagino sempre la struttura pulita, come dovesse essere letta da un lettore di schermo: una suddivisione così forte come con le intestazioni è forse ingiustificata.

I paragrafi li ammetterei nel caso in cui il menù sia ben marcato, ad esempio con un bel titolone prima e un'area ben definita:

codice:

<div id="navigazione">
   <h2>Naviga nel sito</h2>
   

Sezione 1:</p>
   <ul>[*]Link 1.1[*]Link 1.2[/list]
   

Sezione 2:</p>
   <ul>[*]Link 2.1[*]Link 2.2[/list]
</div>

Nel tuo caso mi sentirei di suggerire delle belle liste annidate.

**califfo** · 22-03-2006, 16:17

E così come lo vedi ?
Ho aggiunto il titolo ma ho annidato le liste anzichè usare i paragrafi.

codice:

<div id="navigazione">
 <h2>Menu di navigazione</h2>
  <ul>[*]Sezione 1
     <ul>[*]Link 1.1[*]Link 1.2[/list]
     [*]Sezione 2:
     <ul>[*]Link 2.1[*]Link 2.2[/list]
     [/list]
</div>

**pierofix** · 22-03-2006, 16:23

Mi pare che ci siamo.

Per decidere, comunque, occorrerebbe analizzare il contesto in maniera più ampia.

Saresti capace di riassumere il tuo documento tramite macroaree? Ad esempio:

codice:

<body>

   <h1>Titolo del documento</h1>

   <div id="navigazione_principale"></div>

   <div id="pagina">
      <div id="contenuto"></div>
      <div id="navigazione_specifica"></div>
   </div>

   <div id="note_pie_pagina"></div>

</body>

**califfo** · 22-03-2006, 17:01

Intanto ti ringrazio per l'attenzione ....
Mi hai e mi avete "attaccato" la passione per gli standard, per la semantica e per l'accessibilità e credo che vi stresserò parecchio!!!

Allora, anche se sono ancora in fase di progettazione, per ora ho fatto così:

codice:

<body>

<div id="intestazione">[img]img/header.jpg[/img]</div>
<div id="locazione" title="Attuale posizione nel sito">Home page </div>
<div id="corpo">
	<div id="contenuti"><h1>Titolo sezione</h1>

</p></div>

<div id="extra"></div>	
		
<div id="navigazione">
 <h2>Menu di navigazione</h2>
  <ul>[*]Sezione 1
     <ul>[*]Link 1.1[*]Link 1.2[/list]
     [*]Sezione 2:
     <ul>[*]Link 2.1[*]Link 2.2[/list]
     [/list]
</div>

</div>

<div id="pie_di_pagina"></div>
</body>

Tutto è formattato in 3 colonne con posionamento assoluto. Ho cercato di mettere i contenuti più in alto possibile per l'accessibilità però credo che dovrei metterli ancora prima della barra di locazione ...ma questo è un altro post !!

Scusa per il codice non anniodato in maniera carina ma sono un pò di fretta .....grazie ancora ...

**pierofix** · 22-03-2006, 17:08

Mi fa piacere che tu abbia scoperto il vero web, quello emozionante, soddisfacente, affascinante e stimolante.

Anche io adesso sono un po' di fretta. Avrei personalmente qualche commento da fare su tuoi certi impieghi di tag: magari quando avrò un po' di tempo.

Per scegliere il livello dell'intestazione (<h1>, <h2> e via dicendo), prova a visualizzare la pagina come un albero: negli snodi principali piazzaci un bel titolo, per dare così un senso compiuto alla struttura, rendendone evidente con un solo sguardo veloce la gerarchia.

**califfo** · 22-03-2006, 19:59

Commenta commenta ....;-)

Provo a fare quello che che hai detto ma non so se ho capito bene ...
Ecco:

codice:

<body>
<div id="intestazione">
   <h1>Mio sito</h1>
</div>
<div id="locazione">
   <h2>Barra di locazione</h2>
</div>
<div id="corpo">
  <div id="contenuti">
    <h3>Contenuti</h3>
  </div>
  <div id="extra">
    <h3>Sezione extra</h3>
  </div>	
</div>
<div id="navigazione">
  <h3>Menu di navigazione</h3>
</div>
<div id="pie_di_pagina">
  <h3>Piè di pagina</h3>
</div>
</body>

Discussione: Semantica e titolo sezione link

Strumenti discussione

Ricerca discussione

Visualizza

Semantica e titolo sezione link

Permessi di invio