Struttura semantica della pagina

La maggior parte delle pagine ha più o meno la stessa forma: un'intestazione, un menu, il contenuto principale e un piè di pagina. L'HTML ha un elemento per ciascuno, e gli screen reader permettono di saltare direttamente a ognuno.

Dalla zuppa di div ai punti di riferimento

Per anni le pagine sono state costruite con elementi <div> con nomi di classe come header o menu. Un <div> è un contenitore generico senza alcun significato, quindi il nome della classe era l'unico indizio, e lo vedeva solo chi leggeva il codice. Oggi l'HTML ha elementi che dicono che cos'è ogni regione. Browser, motori di ricerca e tecnologie assistive li capiscono, e chi usa uno screen reader può aprire un elenco di queste regioni, chiamate punti di riferimento (landmark), e saltare a quella che vuole, così come chi vede dà un'occhiata all'impaginazione.

Le regioni principali

• <header>: contenuto introduttivo, di solito il nome o il logo del sito e spesso il menu principale. Anche un articolo può avere un suo header.
• <nav>: un blocco di link di navigazione principali, come il menu del sito o un indice. Non tutti i gruppi di link ne hanno bisogno.
• <main>: il contenuto specifico di questa pagina. Usa esattamente un <main> visibile per pagina, e non metterlo dentro header, nav, aside o footer.
• <article>: un pezzo autonomo che avrebbe senso anche da solo, come un post di un blog, una notizia o la scheda di un prodotto.
• <section>: una parte tematica di una pagina o di un articolo, di norma con un suo titolo.
• <aside>: contenuto legato al contenuto principale ma separato da esso, come una barra laterale, un riquadro di glossario o dei link correlati.
• <footer>: informazioni di chiusura come l'autore, il copyright e i link di contatto.

Questi elementi descrivono il significato, non la posizione. Un <nav> non deve per forza stare in cima, e un <aside> non deve per forza stare a destra; su un telefono l'aside di solito finisce sotto il contenuto principale. Le posizioni vengono dal CSS. Scegli l'elemento chiedendoti che cos'è il contenuto, così come hai scelto i livelli dei titoli in base alla struttura e non alla grandezza.

article o section?

La domanda da porsi è se il pezzo avrebbe senso da solo altrove, per esempio in un lettore di notizie o condiviso come link. Se sì, è un <article>. Se ha senso solo come parte di qualcosa di più grande, come la parte Ingredienti di una ricetta, è una <section>. Entrambi di norma iniziano con un titolo. Gli articoli possono contenere sezioni, e una sezione può contenere articoli, come una sezione Ultimi post che contiene diverse schede di post.

div e span hanno ancora un ruolo

Quando nessun elemento è adatto, usa <div> per un blocco e <span> per poche parole dentro una riga. Sono utili come agganci per il CSS, per esempio un <div class="cards"> che dispone delle schede in una griglia. La regola è cercare prima un elemento con un significato e ripiegare su uno generico solo quando niente descrive il contenuto. Una pagina fatta solo di div funziona, ma nasconde la sua struttura a chiunque non guardi il codice.

Un test rapido: apri la pagina con il CSS disattivato, oppure leggi la scaletta di titoli e punti di riferimento che ti mostra un'estensione del browser. Se la pagina si legge ancora in un ordine sensato, con un'intestazione, un menu, il contenuto principale e un piè di pagina chiari, la struttura fa il suo lavoro.

Prima gli elementi nativi, poi ARIA

Potresti incontrare l'attributo role, che fa parte di uno standard del W3C chiamato WAI-ARIA, scritto come <div role="navigation">. Dà a un elemento generico un significato per le tecnologie assistive. Le indicazioni del W3C sull'uso di ARIA partono da una regola semplice: se un elemento HTML nativo ha già il significato che ti serve, usa quello. <nav> è più breve, funziona ovunque e non si può dimenticare in un punto e ricordare in un altro. Lo stesso vale per i pulsanti: un vero <button> riceve il focus con Tab e si preme con Invio o Spazio senza fatica, mentre un <div> cliccabile ha bisogno di codice in più per fare lo stesso.