Semantica HTML: perché <article>, <section>, <aside>, <nav>

Un <div> funziona sempre. Allora perché HTML ha decine di altri tag come <article> o <nav>? Perché un <div> dice al browser dove mettere qualcosa, ma non cosa è. Gli elementi semantici danno invece un significato al contenuto.

1. Semantico vs generico

<div> e <span> sono generici: contenitori senza significato, utili "solo" per raggruppare gli elementi a fini di applicare stile e posizionarli all'interno della pagina. Gli elementi semantici, invece, descrivono il ruolo del loro contenuto a tre pubblici insieme: il browser, gli altri sviluppatori e le tecnologie assistive.

La regola d'oro di MDN è netta: usa un <div> solo quando serve un semplice contenitore per lo stile, senza significato. Se esiste un elemento più adatto, usa quello.

Vedi: MDN Web Docs: «<section>» (nota: se lo usi come semplice wrapper di stile, usa un <div>).

2. I quattro elementi: chi fa cosa

• <nav> raccoglie i link di navigazione principali (il menu). Non ogni gruppo di link: quelli importanti.
• <article> un contenuto autonomo, che ha senso anche da solo ed è "impacchettabile" altrove: un post, un commento, una notizia, una card prodotto.
• <section> un raggruppamento tematico della pagina, di solito con un titolo, quando non esiste un elemento più specifico. Non è un contenitore di stile (quello è il <div>).
• <aside> contenuto collaterale, legato ma separabile dal principale: sidebar, box articoli correlati, bio dell'autore, pubblicità.

Messi insieme, formano lo scheletro di una pagina ben strutturata:

<body> 
   <nav> … menu principale … </nav> 

<main> 
   <article> 
      <h1>Il mio post</h1> 
      <p>…contenuto autonomo…</p> 
   </article> 

<aside> 
    <h2>Articoli correlati</h2> 
    <p>…contenuto collaterale…</p> 
</aside> 

</main> 

</body>

Fonte: MDN Web Docs: «<article>», «<section>», «<aside>», «<nav>»; WHATWG HTML Living Standard.

3. L'impatto sugli screen reader: i landmark

Questi elementi creano automaticamente dei «landmark»: punti di riferimento che i lettori di schermo usano per saltare da una zona all'altra della pagina, come scorciatoie. <nav> diventa il landmark «navigation», <aside> diventa «complementary», <main> diventa «main», senza codice extra.

Con una pagina fatta solo di <div>, un utente non vedente non ha nessun punto di riferimento: deve ascoltare tutto in fila, dall'inizio. Una piccola trappola: <section> diventa un landmark («region») solo se ha un nome accessibile (un titolo collegato o un attributo aria-label); altrimenti è, di fatto, un <div> con un altro nome.

Fonte: MDN Web Docs: «ARIA: landmark role»; W3C WAI-ARIA APG: «Landmark Regions».

4. L'impatto sulla SEO

I motori di ricerca leggono l'HTML per capire la struttura della pagina: qual è il contenuto principale, dov'è e cos'è l'area di navigazione, cosa è collaterale. Una marcatura semantica chiara li aiuta a interpretarla correttamente.

Attenzione: la semantica non è una bacchetta magica che ti fa salire in classifica e non sostituisce contenuti di qualità e una gerarchia di titoli pulita. Ma dà ai motori un contesto più chiaro e la stessa struttura che aiuta i motori aiuta anche le persone.

In sintesi

Il segreto non è imparare tutti i tag a memoria, ma cambiare la domanda: prima di scrivere <div>, chiediti «che cos'è questo contenuto?». Se ha un nome, una notizia, un menu, una barra laterale, quasi sempre esiste un elemento semantico che lo dice al posto tuo.