HTML Semantico: Guida Completa
L’HTML semantico non è un lusso accademico: è la base su cui si costruiscono siti accessibili, indicizzabili e facili da mantenere. Usare i tag giusti al posto giusto è la differenza tra un sito che funziona e uno che funziona bene.
Perché la semantica conta
I motori di ricerca e gli screen reader non vedono il design: leggono il markup. Un <nav> dice “qui c’è la navigazione” in modo inequivocabile. Un <div class="nav"> no. Questa distinzione ha conseguenze concrete su SEO, accessibilità e manutenzione del codice.
Google utilizza i tag semantici come segnale di struttura. Una pagina con <article>, <header>, <main> e <footer> chiari viene analizzata più velocemente e con meno ambiguità rispetto a una catena di div anonimi.
I tag fondamentali
I tag strutturali di HTML5 risolvono il problema storico della “div soup”:
<header>— intestazione della pagina o di una sezione<nav>— blocco di navigazione principale<main>— contenuto principale (uno per pagina)<article>— contenuto autonomo e redistribuibile<section>— raggruppamento tematico con heading<aside>— contenuto complementare (sidebar, callout)<footer>— piè di pagina o chiusura sezione
Heading e gerarchia
La gerarchia degli heading (h1–h6) è l’ossatura informativa della pagina. Un solo <h1> per pagina, poi <h2> per le sezioni principali e <h3> per le sotto-sezioni. Non saltare livelli: un <h4> dopo un <h2> confonde sia gli utenti che i crawler.
Figure e media
Il tag <figure> con <figcaption> è la struttura corretta per qualsiasi media con didascalia. L’attributo alt sulle immagini non è opzionale: è un requisito di accessibilità WCAG 2.1 e un segnale SEO.
Errori comuni
Il più frequente: usare <div> per tutto. Il secondo: usare i tag semantici come decorazione senza rispettare il loro significato. Un <article> che contiene la sidebar è peggio di un div, perché comunica un significato sbagliato.
L’HTML semantico è il contratto tra chi scrive il codice e chi lo consuma — browser, motori di ricerca, tecnologie assistive.
Per un’implementazione professionale di siti con markup semantico e struttura SEO-first, le agenzie web specializzate possono fare la differenza rispetto a template generici.