Elementi semantici

Perché la semantica

I tag semantici HTML descrivono il ruolo del contenuto, non solo il layout. Browser, screen reader e motori di ricerca costruiscono una mappa della pagina: dove inizia la navigazione, dove sta il contenuto principale, cosa è un articolo autonomo. Sostituire tutto con <div> funziona visivamente ma toglie segnali utili; la semantica corretta spesso non cambia un pixel del design se lo stile è su classi CSS.

Elementi chiave

• <header> — intestazione di pagina o di una sezione (logo, titolo sezione).
• <nav> — blocchi di link di navigazione principali o secondari.
• <main> — contenuto unico di quella pagina (uno solo per documento).
• <article> — contenuto autonomo (post blog, scheda prodotto, commento).
• <section> — raggruppamento tematico con titolo.
• <aside> — contenuto correlato tangenziale.
• <footer> — metadati, link legali, copyright.

Scheletro pagina

Un layout tipico separa chrome ripetuto (header/footer) dal contenuto variabile nel main.

<body>
  <header>
    <nav aria-label="Principale">…</nav>
  </header>
  <main id="contenuto">
    <article>
      <h1>Titolo pagina</h1>
      <p>…</p>
    </article>
  </main>
  <footer>
    <nav aria-label="Legale">…</nav>
  </footer>
</body>

Landmark e navigazione

Gli screen reader espongono shortcut tra landmark (main, nav, header). Più nav nella stessa pagina devono distinguersi con aria-label («Principale», «Footer», «Breadcrumb»). Un solo main: se ne inserisci due, l’utente assistivo non sa quale saltare per leggere il contenuto.

Componenti e partial

Card prodotto: article se contenuto autonomo, altrimenti li dentro ul lista. Time element con datetime machine-readable per date pubblicazione. address solo per contatti editoriali pagina, non per ogni footer generico. Non wrappare tutto in section senza titolo: section vuota semanticamente è peggio di div.

Microdata opzionale non sostituisce HTML semantico di base.

Verifica periodica

Programma ogni trimestre un controllo su pagine ad alto traffico: applica i criteri di Elementi semantici con la stessa procedura (browser, dispositivo, rete). Registra esito e responsabile in un foglio condiviso così il team non riparte da zero.

Se hai appena cambiato tema, plugin o builder, ripeti il controllo dopo 48 ore: cache CDN e minificazione possono mascherare errori finché non scade la vecchia versione. Coinvolgi chi scrive i contenuti, non solo chi sviluppa: molti problemi nascono da campi CMS lasciati vuoti.

Confronta i risultati con una pagina concorrente solo per capire gap di chiarezza, non per copiare testi. L’obiettivo è che un visitatore capisca in pochi secondi cosa offri e come contattarti.

Errori comuni

• Due elementi main per comodità di layout.
• Nav senza label quando ce ne sono più di una.
• Article annidati senza motivo per ogni card in lista.
• Section senza heading, che perde significato semantico.
• Header/footer duplicati dentro ogni section invece che a livello pagina.

In pratica, integra questo controllo nella routine di qualità del sito: una pagina campione al mese per categoria (home, servizio, articolo, checkout se presente), stesso profilo browser e rete. Annota nel registro interno data verifica e esito, così al prossimo redesign sai cosa è già stato validato. Quando il team cresce, una checklist condivisa evita che ognuno interpreti i criteri in modo diverso e riduce regressioni dopo deploy frettolosi.

Quando lavori con clienti o stakeholder non tecnici, traduci ogni raccomandazione in un esempio concreto sulla loro pagina: uno screenshot prima/dopo, una URL di prova, un tempo di caricamento misurato. Così le lezioni diventano azioni nel backlog invece di slide dimenticate. Riutilizza gli stessi criteri su ambienti preview prima della produzione e registra chi ha approvato il go-live, per tracciabilità in caso di regressione SEO o accessibilità.

Tieni un elenco di URL di riferimento nel tuo progetto e riapplicalo dopo ogni modifica al tema o al CMS, così non devi ricordare a memoria ogni regola.

In breve

• Tag con significato al posto di div anonimi dove serve.
• Un solo main per pagina.
• Nav multiple con aria-label.
• Scheletro coerente su tutto il sito.