HTML semantico: quali tag usare e perché contano per accessibilità, Google e IA

Un browser mostra allo stesso modo un <div> e un <nav>. La differenza sta nel significato: l'HTML semantico dice a ogni programma che legge la pagina quale ruolo ha ciascun blocco. MDN lo definisce come l'uso degli elementi in base al loro significato, non al loro aspetto predefinito. Motori di ricerca, tecnologie assistive e crawler che alimentano i modelli di IA traggono tutti vantaggio da questo significato.

Quali sono i principali tag HTML semantici?

Lo standard HTML definisce decine di elementi. Questi sono quelli che strutturano quasi ogni pagina di contenuto:

Anche i tag a livello di testo hanno un significato: <strong> per l'importanza, <em> per l'enfasi, <blockquote> e <cite> per le citazioni, <ul> e <ol> per gli elenchi, <a> per i link e <button> per le azioni.

Perché l'HTML semantico conta per l'accessibilità?

Gli screen reader costruiscono una mappa della pagina a partire dai tag. Le aree <header>, <nav>, <main>, <aside> e <footer> permettono di saltare direttamente al menu o al contenuto, e l'elenco dei titoli funziona come un indice. I tutorial di accessibilità del W3C sulla struttura della pagina raccomandano per questo queste aree e un ordine logico dei titoli.

Un <div> cliccabile è invisibile alla tastiera e muto per uno screen reader, a meno di ricostruire a mano ciò che un <button> nativo offre gratis. Gli elementi nativi portano con sé il ruolo, il focus da tastiera e il comportamento atteso. In molti Paesi, inoltre, l'accessibilità dei siti pubblici e commerciali è un obbligo di legge: un markup pulito è anche una questione di conformità.

L'HTML semantico aiuta la SEO?

Google non ha mai presentato i tag semantici come un fattore di ranking diretto, e una pagina fatta solo di <div> può posizionarsi. Il vantaggio è indiretto, ma reale:

• Individuazione del contenuto principale: <main> e <article> aiutano a separare il testo che conta da menu, barre laterali e piè di pagina ripetuti su ogni pagina.
• Struttura dell'argomento: una gerarchia di titoli ordinata mostra cosa copre la pagina e come si collegano le sue parti, il che sostiene la pertinenza per le query a coda lunga.
• Comprensione precisa degli elementi: tabelle, elenchi e date reali si leggono meglio delle imitazioni visive fatte con blocchi stilizzati.
• Coerenza con i dati strutturati: markup semantico e JSON-LD descrivono la stessa pagina da due angolazioni. La nostra voce sui contenuti strutturati mostra come si integrano.

L'HTML semantico fa parte della SEO tecnica come gli URL puliti o le pagine veloci: una base che permette di leggere correttamente i vostri contenuti.

Come usano gli assistenti IA la struttura di una pagina?

ChatGPT, Gemini, Perplexity e le AI Overviews di Google non citano pagine intere: selezionano passaggi. I crawler che scaricano la vostra pagina di solito eliminano la navigazione e gli elementi ripetuti, poi dividono il testo in blocchi. Una sezione che si apre con un <h2> chiaro, risponde alla sua domanda nel primo paragrafo e resta in una sola <section> produce un blocco pulito. Lo stesso contenuto sparso in <div> annidati, con titoli simulati in grassetto, produce frammenti mescolati alle voci di menu. La nostra voce sul content chunking spiega come scrivere sezioni che resistono a questo taglio.

Com'è fatta una pagina articolo ben strutturata?

Ecco lo scheletro di un articolo di blog, descritto tag per tag:

1. <header> contiene il logo e un <nav> con il menu principale. Questo blocco si ripete su ogni pagina, quindi i crawler imparano a ignorarlo.

2. <main> si apre subito dopo. Contiene un solo <article>, il contenuto che volete far indicizzare e citare.

3. Dentro l'<article>, un <header> raggruppa l'<h1> (l'argomento della pagina), il nome dell'autore e un elemento <time datetime="2026-10-18"> con la data di pubblicazione in un formato leggibile da una macchina.

4. Ogni parte dell'articolo è una <section> che inizia con un <h2> formulato come la domanda a cui risponde, seguito da paragrafi <p>, elenchi <ul> o una <table> con intestazioni <th>.

5. Un grafico va in una <figure> con un <img> dotato di testo alternativo descrittivo e una <figcaption> che dice cosa mostra.

6. I link correlati vanno in un <aside>, fuori dal flusso principale dell'articolo.

7. Un <footer> chiude la pagina con i link legali e di contatto.

Con questo scheletro, chi usa uno screen reader raggiunge il contenuto con un tasto, Google vede un articolo principale con uno schema chiaro e un crawler IA può riprendere qualsiasi <section> come risposta autonoma.

Quali sono gli errori di HTML semantico più comuni?

• Div ovunque: i page builder producono spesso strati di <div> senza alcuna area. Verificate almeno che esista un <main> che racchiude il contenuto.
• Titoli saltati o usati male: passare da <h2> a <h4>, usare i titoli per ingrandire il testo o paragrafi in grassetto come finti titoli. Scegliete il livello in base alla struttura, poi applicate lo stile con il CSS.
• Più <h1> in concorrenza: l'HTML lo consente, ma un solo <h1> che descrive l'argomento della pagina resta il segnale più chiaro per utenti e motori di ricerca.
• <div> e <span> cliccabili: usate <a> per la navigazione e <button> per le azioni.
• Tabelle di layout e finte tabelle: le tabelle servono ai dati; i dati mostrati in blocchi stilizzati perdono le relazioni tra righe e colonne.
• Testo nelle immagini: un titolo o un prezzo dentro un'immagine non può essere letto né da un crawler né da uno screen reader.
• Date solo in testo semplice: aggiungete <time> con un attributo datetime perché la data sia univoca.

Come verificare la struttura semantica di una pagina?

Tre controlli rapidi coprono la maggior parte dei problemi. Primo, visualizzate lo schema dei titoli della pagina e leggetelo da solo: deve raccontare il contenuto. Secondo, cercate <main>, <nav> e <article> nel codice sorgente. Terzo, navigate la pagina solo con la tastiera e verificate che ogni link e ogni pulsante siano raggiungibili. Il nostro audit SEO on-page elenca i problemi di titoli e markup di qualsiasi URL, e l'estensione Chrome gratuita di Sorank mostra la struttura dei titoli della pagina che state guardando.

Usate ogni tag per ciò che significa: un solo <main>, un solo <h1>, sezioni ordinate e tabelle vere danno a persone, Google e IA la stessa mappa chiara della vostra pagina. Con una struttura pulita, resta da scrivere e pubblicare contenuti con regolarità: Sorank scrive e pubblica articoli ottimizzati per Google e le IA in autopilot.