Come, dove e perchè utilizzare i tag header (h1, h2, ecc) e la semantica dell'HTML

Piano piano sto facendo quello che avrei dovuto fare tempo fa, informarmi meglio :mrgreen:

Sto creando un nuovo tema per un mio sito e ho deciso di fare tutto quasi perfetto.
Sto puntando moltissimo all'accessibilità e alla coerenza/semantica del codice.
Oggi mi sono quindi messo in cerca di alcune informazioni, le basiù: i tag h*.

Ho trovato queste informazioni:

<h1> per i titoli;
<h2> o <h3> per i sottotitoli;
<h3> o <h4> per i testi nel corpo della pagine;
<h5> o <h6> per piè di pagina, copyright, note, data aggiornamento ecc...

Ora, supponiamo di avere un forum, ora come ora ho questa struttura:

Codice HTML:

<h1>Nome Sito</h1> <h2>Forum</h2> <h3>Nome categoria 1</h3> <h4>Nome sezione 1 cat 1</h4> <p>Descrizione della sezione</p> <h4>Nome sezione 2 cat 1</h4> <p>Descrizione della sezione</p> <h4>Nome sezione 3 cat 1</h4> <p>Descrizione della sezione</p> <h3>Nome categoria 2</h3> <h4>Nome sezione 1 cat 2</h4> <p>Descrizione della sezione</p> <h4>Nome sezione 2 cat 2</h4> <p>Descrizione della sezione</p> <h4>Nome sezione 3 cat 2</h4> <p>Descrizione della sezione</p>

E' giusto? Non vorrei abuarne ed avere tutto il contrario di quello che voglio :mrgreen:

Invece supponiamo, di avere una home page con dei blocchi, ora come ora ho:

Codice HTML:

<h1>Nome Sito</h1> <h2>Home page</h2> <h3>Benvenuto in Nome Sito</h3> <p>Descrizione e presentazione di Nome Sito</p> <h4>Nome blocco (esempio: ultimi messaggi del forum</h4> <dl> <dt>Titolo topic 1</dt> <dd>Sezione forum 1</dt> <dd>Autore 1</dt> <dd>Data 1</dt> <dt>Titolo topic 2</dt> <dd>Sezione forum2</dt> <dd>Autore 2</dt> <dd>Data 2</dt> </dl> <h4>Nome blocco (esempio: ultimi concorsi del sito)</h4> <dl> <dt>Categoria concorso 1</dt> <dd>Concorso 1 cat 1</dt> <dd>Concorso 2 cat 1</dt> <dd>Concorso 3 cat 1</dt> <dt>Categoria concorso 2</dt> <dd>Concorso 1 cat 2</dt> <dd>Concorso 2 cat 2</dt> <dd>Concorso 3 cat 2</dt> </dl>

Stessa cosa di prima, ne sto abusando o no? :mrgreen:

Le informazioni le prendo da qui: uno due tre e quattro. Fanno tutte parte di una guida sull'accessibilità piuttosto completa, se vuoi darci un'occhiata.

Per quanto riguarda gli header, non è che ci sia una regola fissa su cosa devono definire. Piuttosto c'è sulla loro disposizione:
- l'elemento H1 dovrebbe essere unico
- i successivi elementi strutturali dovrebbero essere "contigui", ovvero non va inserito un H3 se non è immediatamente preceduto da un H2
- gli elementi H* non vanno usati solo per la loro diversa formattazione (naturale o artificiosamente creata via CSS)
Da questo punto di vista, mi sembra che il tuo uso sia corretto.

Quanto alle liste di definizione (DL/DT/DD), l'uso più appropriato che puoi farne è quello di una struttura testo-descrizione ripetuta su più livelli. Da questo punto di vista, forse sarebbe meglio che la usassi nel primo caso, mettendo DT al posto degli H4 e DD al posto dei P. Nel secondo caso, invece, dove a quanto ho capito hai una struttura gerarchica, la soluzione migliore è usare una struttura per liste semplici (UL o OL), nella quale, se scopri che un nodo ha dei "figli", sostituisci un LI con un nuovo UL/OL.

Stammi bene...

L'elemento H1 soprattutto rappresenta in breve il contenuto della pagina, quindi dovrebbe essere diverso pagina per pagina, e non sempre il nome del sito.

Nella home, ha senso che lo sia ovviamente.

Per le liste DL, occhio che vengono lette o tradotte dagli screen reader come " {dt} is/è {dd} ", quindi in alcuni casi suona strano. Andrebbero usate solo per vere e proprie liste di definizioni, come glossari o simili.

Allora, ho modificato leggermente la home page per esempio in questo modo:

Codice HTML:

<h1>Nome Sito</h1> Link navigazione -> <h2>Ultimo elemento (pagina dove mi trovo)</h2> <div> <h3>Benvenuto in Nome Sito</h3> <p>Descrizione e presentazione di Nome Sito</p> </div> <div> <span>Nickname</span> <div> <img>Avatar</img> </div> </div> <div> <h4>Nome blocco (esempio: ultimi messaggi del forum)</h4> <ol> <li> <a>Titolo argomento 1</a> <div>Sezione forum, nick, data 1</div> </li> <li> <a>Titolo argomento 2</a> <div>Sezione forum, nick, data 2</div> </li> <li> <a>Titolo argomento 3</a> <div>Sezione forum, nick, data 3</div> </li> </ol> </div> <div> <h4>Nome blocco (esempio: argomenti più visti)</h4> <ol> <li> <a>Titolo argomento 1</a> <div>Sezione forum, nick, data 1</div> </li> <li> <a>Titolo argomento 2</a> <div>Sezione forum, nick, data 2</div> </li> <li> <a>Titolo argomento 3</a> <div>Sezione forum, nick, data 3</div> </li> </ol> </div>

Poi grazie infinite dei link, ora mi metto a leggerli. Facendo dei test online nella home page ho "Level AAA Conformance to Web Content Accessibility Guidelines 2.0", però ora mi scarico anche uno screen reader se possibile, in modo da vedere come dovrebbe essere!

per Firefox, puoi dare un'occhiata a Fangs

Ho scaricato NVDA, è Open Source.
Comunque essendo un portale di grafica, devo per forza stare ad ottimizzare al massimo anche per questi utenti? Cioè, è un pò una contraddizione!