HTML semantico: perché conta e come usarlo bene

Molte pagine moderne sono costruite quasi soltanto con div e span, a cui si aggiungono classi CSS e qualche riga di JavaScript per farli comportare come pulsanti, menu o intestazioni. Visivamente il risultato può essere identico a una pagina scritta bene, ma per il browser, per i lettori di schermo e per i motori di ricerca è un documento quasi muto. L'HTML semantico consiste nello scegliere l'elemento che descrive il significato del contenuto, non il suo aspetto.

Che cosa vuol dire "semantico"

Ogni elemento HTML porta con sé un ruolo. Un button è un controllo attivabile, un nav è un blocco di navigazione, un h2 è un titolo di secondo livello. Quando usi l'elemento giusto, il browser ti regala gratuitamente una serie di comportamenti: il focus con la tastiera, l'attivazione con Invio e Spazio, l'annuncio corretto da parte delle tecnologie assistive, la possibilità di saltare da una sezione all'altra.

Confronta questi due frammenti:

<!-- Non semantico -->
<div class="btn" onclick="salva()">Salva</div>

<!-- Semantico -->
<button type="button" onclick="salva()">Salva</button>

Il primo non riceve il focus da tastiera, non viene annunciato come pulsante e non risponde al tasto Invio. Per ottenere lo stesso comportamento dovresti aggiungere tabindex, un ruolo ARIA e la gestione degli eventi di tastiera. Il secondo funziona già.

La struttura della pagina: i landmark

HTML5 ha introdotto elementi che descrivono le grandi aree di una pagina. I lettori di schermo li espongono come "punti di riferimento" (landmark) tra cui l'utente può saltare.

• header: intestazione della pagina o di una sezione.
• nav: gruppi di link di navigazione principali.
• main: il contenuto principale, uno solo per pagina.
• article: un contenuto autonomo, che avrebbe senso anche estratto dalla pagina (un post, una scheda prodotto).
• section: una porzione tematica con un proprio titolo.
• aside: contenuto collaterale, come un box di approfondimento.
• footer: piè di pagina della pagina o di una sezione.

Uno scheletro tipico:

<body>
  <header>
    <a href="/">Logo</a>
    <nav aria-label="Principale">...</nav>
  </header>
  <main>
    <article>
      <h1>Titolo dell'articolo</h1>
      <p>...</p>
      <section>
        <h2>Primo argomento</h2>
      </section>
    </article>
  </main>
  <footer>...</footer>
</body>

I titoli non sono una questione di dimensione

Un errore comune è scegliere h3 o h4 perché "ha la grandezza giusta". I livelli dei titoli descrivono la gerarchia del documento, non il corpo del carattere: le dimensioni si regolano con il CSS. Una buona regola pratica è avere un solo h1 per pagina e non saltare livelli scendendo (da h2 a h4 senza un h3). Molti utenti di lettori di schermo navigano proprio scorrendo l'elenco dei titoli: una gerarchia coerente equivale a un indice leggibile.

Elementi semantici meno conosciuti

Oltre ai landmark esistono elementi piccoli ma molto utili:

• time con l'attributo datetime rende una data leggibile anche dalle macchine: <time datetime="2025-03-14">14 marzo</time>.
• figure e figcaption associano un'immagine o un frammento di codice alla sua didascalia.
• details e summary creano un pannello espandibile nativo, senza JavaScript.
• abbr con title spiega una sigla.
• dl, dt e dd descrivono coppie termine-definizione, ideali per glossari e schede tecniche.

Liste e tabelle usate per quello che sono

Un menu è un elenco di link, quindi ul con li è la scelta naturale: il lettore di schermo annuncerà "elenco, cinque elementi", dando subito un'idea della struttura. Le tabelle, invece, vanno usate per dati tabellari e non per impaginare. Quando servono, usa caption per il titolo, thead e tbody per separare intestazioni e dati, e th con scope per collegare ogni cella alla sua intestazione.

I benefici concreti

Accessibilità

È il vantaggio più evidente. Un pulsante vero, un link vero e un titolo vero funzionano con tastiera, lettori di schermo, comandi vocali e strumenti di ingrandimento senza codice aggiuntivo. Ogni volta che ricostruisci un controllo nativo con un div, ti assumi il compito di replicare comportamenti che il browser aveva già implementato e testato.

SEO

I motori di ricerca usano la struttura per capire di cosa parla la pagina e quali parti sono contenuto principale rispetto a navigazione e piè di pagina. Titoli coerenti, paragrafi veri e link descrittivi rendono il testo più facile da interpretare. Non è una scorciatoia per posizionarsi, ma elimina ambiguità.

Manutenzione

Il codice semantico si legge meglio. Chi apre il file dopo sei mesi trova nav, main e article invece di dieci livelli di div class="wrapper-inner". Anche il CSS ne beneficia: puoi scrivere selettori più brevi e meno fragili.

Quando un div va benissimo

L'HTML semantico non significa eliminare div e span. Sono perfetti come contenitori puramente presentazionali, per esempio per raggruppare elementi da disporre con Flexbox o Grid. La domanda da farsi è semplice: esiste un elemento che descrive il significato di questo contenuto? Se sì, usalo. Se no, un div è la scelta corretta.

Come verificare il tuo markup

Alcuni controlli rapidi aiutano a scoprire i problemi:

1. Naviga la pagina solo con la tastiera, usando Tab, Invio e Spazio.
2. Apri il pannello Accessibilità degli strumenti per sviluppatori del browser e osserva l'albero di accessibilità.
3. Disattiva il CSS: la pagina dovrebbe restare comprensibile e ordinata.
4. Controlla la gerarchia dei titoli con un'estensione o con la vista "struttura" del browser.

In sintesi

• Scegli gli elementi HTML in base al significato del contenuto, non al loro aspetto.
• Usa i landmark (header, nav, main, footer) per dare una struttura navigabile alla pagina.
• I livelli dei titoli descrivono la gerarchia: le dimensioni si gestiscono con il CSS.
• Gli elementi nativi offrono gratis accessibilità e comportamenti da tastiera.
• div e span restano utili, ma solo quando nessun elemento semantico è adatto.