Quando scrivi HTML, ogni tag che usi comunica qualcosa — non solo al browser, ma anche ai motori di ricerca, agli screen reader e agli altri sviluppatori che leggeranno il tuo codice.
Questo è il principio alla base dell’HTML semantico: usare il tag giusto per il contenuto giusto.
Se hai già letto la guida completa su HTML vs HTML5, sai che la semantica è la differenza più importante introdotta da HTML5. Ma sapere che esistono <header>, <main>, <article> e <section> è solo il punto di partenza.
Il vero problema è capire quando usare ciascuno — perché usarli male è peggio che usare <div> ovunque. Introduce rumore semantico, confonde Google e non porta nessun vantaggio reale.
In questa guida trovi tutto quello che ti serve: la teoria, i tag principali con esempi pratici e regole d’uso, la struttura di una pagina HTML5 moderna, come gli screen reader leggono la semantica, quando serve ARIA, una checklist di accessibilità e gli errori comuni da evitare.
In questa guida:
- Cos’è l’HTML Semantico?
- Perché Usare i Tag Semantici HTML5?
- I Tag Semantici HTML5 Principali
- Struttura Completa di una Pagina HTML5 Semantica
- Come gli Screen Reader Leggono l’HTML Semantico
- ARIA Roles e HTML Semantico: Quando Usarli Insieme
- Checklist Accessibilità HTML: 8 Regole Pratiche
- Errori Comuni da Evitare
- HTML Semantico e SEO: Cosa Dice Google
Cos’è l’HTML Semantico?
L’HTML semantico significa utilizzare elementi HTML che descrivono il significato del contenuto che contengono, non solo il suo aspetto visivo.
Un esempio immediato:
Senza semantica:
<div class="intestazione">Benvenuto nel mio sito</div>Con semantica:
<header>
<h1>Benvenuto nel mio sito</h1>
</header>Visivamente il risultato potrebbe essere identico. Ma per Google, per uno screen reader e per un collega che legge il tuo codice, la differenza è enorme.
In HTML 4 l’unico elemento strutturale era <div> — un contenitore generico senza significato. Per dare struttura a una pagina si usavano classi e ID arbitrari come id="header", class="content", id="footer". Questi nomi avevano senso per lo sviluppatore, ma per il browser, per Google e per gli screen reader erano tutti identici: contenitori anonimi.
HTML5 ha risolto questo problema introducendo elementi con significato intrinseco. Ogni tag semantico comunica il ruolo di quel blocco nella pagina — indipendentemente dal nome della classe o dall’ID assegnato.
Perché Usare i Tag Semantici HTML5?
Ci sono tre ragioni concrete per cui vale la pena imparare e applicare l’HTML semantico:
1. SEO migliore Innanzitutto, i crawler di Google interpretano la struttura semantica per capire la gerarchia dei contenuti. Un <article> con un <h1> ben strutturato ha più peso di un <div> anonimo.
2. Accessibilità reale Inoltre, gli screen reader usati da persone non vedenti si affidano ai tag semantici per navigare la pagina. Un <nav> segnala “qui ci sono i link di navigazione”. Un <main> dice “qui inizia il contenuto principale”.
3. Codice manutenibile Infine, un team che legge <aside> capisce immediatamente che si tratta di un contenuto secondario. Con <div class="sidebar-content"> serve interpretare. La semantica riduce l’ambiguità.
I Tag Semantici HTML5 Principali
In questa sezione trovi i tag fondamentali introdotti con HTML5, con spiegazione e codice pratico.
La mappa completa dei tag semantici HTML5
| Tag | Ruolo | Quante volte per pagina |
|---|---|---|
<header> | Intestazione di pagina o sezione | Più di uno (uno per <article>) |
<nav> | Navigazione principale o secondaria | Più di uno |
<main> | Contenuto principale della pagina | Uno solo |
<article> | Contenuto autonomo e redistribuibile | Più di uno |
<section> | Sezione tematica con heading proprio | Più di uno |
<aside> | Contenuto correlato ma non essenziale | Più di uno |
<footer> | Piè di pagina o di sezione | Più di uno (uno per <article>) |
<figure> + <figcaption> | Contenuto illustrativo con didascalia | Più di uno |
<time> | Data o orario leggibile dalla macchina | Più di uno |
<address> | Informazioni di contatto dell’autore | Più di uno |
<header>
In particolare, questo tag rappresenta l’intestazione della pagina o di una sezione. Tipicamente contiene il logo, il titolo del sito e la navigazione principale.
<header>
<a href="/" aria-label="Torna alla home">
<img src="logo.svg" alt="Logo del sito" width="150" height="50">
</a>
<h1>Fabio Gulotta — Sviluppatore Full Stack</h1>
<nav aria-label="Navigazione principale">
<ul>
<li><a href="/blog">Blog</a></li>
<li><a href="/chi-sono">Chi Sono</a></li>
<li><a href="/contatti">Contatti</a></li>
</ul>
</nav>
</header>Puoi usare <header> anche all’interno di <article> o <section> per indicare l’intestazione di quella sezione specifica.
Regole pratiche
- Puoi avere più
<header>nella stessa pagina — uno per la pagina, uno per ogni<article>. <header>non è obbligatoriamente il primo elemento della pagina. È l’intestazione del suo elemento padre.- Non annidare
<header>dentro un altro<header>.
<nav>
Identifica un blocco di link di navigazione. Non va usato per ogni lista di link, ma solo per le navigazioni principali (menu, breadcrumb, paginazione).
<!-- Navigazione principale -->
<nav aria-label="Menu principale">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/articoli">Articoli</a></li>
</ul>
</nav>
<!-- Breadcrumb -->
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
<li aria-current="page">Tag Semantici HTML5</li>
</ol>
</nav>L’attributo aria-label è fondamentale quando hai più <nav> nella stessa pagina: permette agli screen reader di distinguerli.
Regole pratiche
- Usa
aria-labelper distinguere più<nav>nella stessa pagina — gli screen reader lo annunciano all’utente. - Non usare
<nav>per i link nel footer di copyright, per i link social o per link isolati in un paragrafo. - I link di paginazione (
< Precedente / Successivo >) meritano un<nav>.
<main>
Contiene il contenuto principale e unico della pagina. Deve essere unico nella pagina (non usarne due) e non va inserito dentro <header>, <footer>, <aside> o <nav>.
<main id="contenuto-principale">
<h1>Tag Semantici HTML5: Guida Completa</h1>
<p>Il contenuto principale dell'articolo va qui.</p>
</main>L’attributo id="contenuto-principale" è utile per i link “salta al contenuto” (skip links), essenziali per l’accessibilità da tastiera.
Regole pratiche
- Un solo
<main>per pagina — questa è l’unica regola assoluta dei tag semantici HTML5. - Non inserire mai
<main>dentro<header>,<footer>,<article>,<aside>o<nav>. - Gli screen reader usano
<main>come punto di salto diretto al contenuto — senza di esso, l’utente deve scorrere tutta la navigazione ogni volta.
<article>
Rappresenta un contenuto autonomo e indipendente: un post del blog, un commento, una scheda prodotto, un widget. Il test è semplice: ha senso da solo, fuori dalla pagina? Se sì, usa <article>.
<article>
<header>
<h2>Come usare Flexbox in CSS</h2>
<time datetime="2026-02-15">15 febbraio 2026</time>
<address rel="author">di <a href="/chi-sono">Fabio Gulotta</a></address>
</header>
<p>Flexbox è uno dei sistemi di layout più potenti in CSS...</p>
<footer>
<p>Categorie: <a href="/css">CSS</a>, <a href="/layout">Layout</a></p>
</footer>
</article><article> annidati: commenti e contenuti correlati
Gli <article> possono essere annidati — i commenti a un post sono <article> dentro l’<article> principale:
<article>
<h1>Titolo del post</h1>
<p>Corpo del post...</p>
<section>
<h2>Commenti</h2>
<article>
<header>
<p>Mario Rossi — <time datetime="2026-02-01">1 febbraio 2026</time></p>
</header>
<p>Ottimo articolo, molto chiaro!</p>
</article>
<article>
<header>
<p>Laura Bianchi — <time datetime="2026-02-02">2 febbraio 2026</time></p>
</header>
<p>Grazie, mi ha risolto un dubbio che avevo da tempo.</p>
</article>
</section>
</article>
Regole pratiche
- Se il contenuto non ha senso isolato, non è un
<article>— usa<section>o<div>. - Un
<article>dovrebbe avere quasi sempre un heading (<h1>o<h2>a seconda del contesto). - Le card prodotto in una lista e-commerce sono
<article>— ognuna è un’unità indipendente.
<section>
Raggruppa contenuti tematicamente correlati che fanno parte di un contesto più ampio. A differenza di <article>, <section> non ha senso da sola: è una divisione logica di un contenuto più grande.
<article>
<h1>Guida a HTML5</h1>
<section>
<h2>I Tag di Struttura</h2>
<p>header, main, footer...</p>
</section>
<section>
<h2>I Tag di Contenuto</h2>
<p>article, section, aside...</p>
</section>
</article><section> vs <div>: la regola d’oro
La distinzione più difficile da capire è questa. Usa <section> se:
- Il blocco ha un heading proprio (H2, H3…).
- Il blocco rappresenta una parte tematica distinta del contenuto.
- Comparirebbe come voce separata in un sommario della pagina.
Usa <div> se stai solo raggruppando elementi per ragioni di stile o layout, senza significato tematico.
<!-- ✅ Corretto: section con heading tematico -->
<section>
<h2>Requisiti di sistema</h2>
<p>Per installare il software hai bisogno di...</p>
</section>
<!-- ❌ Sbagliato: section senza heading, solo per layout -->
<section class="flex-container">
<img src="foto.jpg" alt="...">
<p>Descrizione immagine</p>
</section>
<!-- ✅ Corretto per il caso sopra: div -->
<div class="flex-container">
<img src="foto.jpg" alt="...">
<p>Descrizione immagine</p>
</div>
<aside>
Contiene informazioni correlate ma non essenziali al contenuto principale: sidebar, box informativi, pubblicità, widget correlati.
<!-- Sidebar del blog -->
<aside aria-label="Contenuti correlati">
<h2>Articoli Correlati</h2>
<ul>
<li><a href="/html-vs-html5">HTML vs HTML5: Differenze Complete</a></li>
<li><a href="/css-flexbox">CSS Flexbox: Guida Pratica</a></li>
</ul>
</aside>
<!-- Box informativo dentro un articolo -->
<article>
<p>Il DOCTYPE è la prima riga di ogni documento HTML5...</p>
<aside>
<p><strong>Nota:</strong> Il DOCTYPE non è un tag HTML, è un'istruzione per il browser.</p>
</aside>
</article><main>
<article>
<h1>Introduzione a JavaScript</h1>
<p>JavaScript è il linguaggio di programmazione del web...</p>
<aside>
<h2>Sapevi che?</h2>
<p>JavaScript è stato creato in soli 10 giorni da Brendan Eich nel 1995.</p>
</aside>
<p>Le variabili in JavaScript si dichiarano con let, const o var...</p>
</article>
<!-- Sidebar globale della pagina -->
<aside aria-label="Sidebar">
<h2>Articoli correlati</h2>
<ul>
<li><a href="/typescript">Introduzione a TypeScript</a></li>
<li><a href="/nodejs">Node.js: guida per iniziare</a></li>
</ul>
</aside>
</main>
Regole pratiche
<aside>dentro un<article>→ correlato a quell’articolo.<aside>figlio diretto di<body>o<main>→ sidebar globale della pagina.- Non usare
<aside>per contenuto essenziale alla comprensione del testo principale.
<footer>
Rappresenta il piè di pagina della pagina o di una sezione. Contiene tipicamente copyright, link legali, contatti, sitemap secondaria.
<footer>
<nav aria-label="Link utili">
<ul>
<li><a href="/privacy">Privacy Policy</a></li>
<li><a href="/cookie">Cookie Policy</a></li>
<li><a href="/sitemap">Sitemap</a></li>
</ul>
</nav>
<p>
<small>© 2026 Fabio Gulotta —
<a href="https://fabiogulotta.it" rel="home">fabiogulotta.it</a>
</small>
</p>
</footer>Come <header>, anche <footer> può essere usato dentro un <article> per indicare il piè di pagina di quell’articolo.
Altri Tag Semantici Utili
Oltre ai principali tag strutturali, HTML5 introduce elementi semantici per il contenuto inline:
<time> — Per date e orari:
<time> marca date e orari in modo che siano leggibili sia dagli utenti che dalle macchine. L’attributo datetime fornisce il valore in formato ISO — fondamentale per i rich snippet di Google (data di pubblicazione, eventi).
<!-- Data di pubblicazione -->
<p>Pubblicato il <time datetime="2026-02-23">23 febbraio 2026</time></p>
<!-- Data e ora -->
<p>Evento il <time datetime="2026-03-15T10:00">15 marzo 2026 alle 10:00</time></p>
<!-- Durata -->
<p>Tempo di lettura: <time datetime="PT8M">8 minuti</time></p>
<address> — Per informazioni di contatto dell’autore:
<address>
Scrivi a: <a href="mailto:info@fabiogulotta.it">info@fabiogulotta.it</a>
</address><figure> e <figcaption> — Per immagini con didascalia:
<figure> racchiude contenuto illustrativo — immagini, grafici, snippet di codice, video — che è referenziato dal testo principale ma che potrebbe essere spostato senza interrompere il flusso del contenuto. <figcaption> fornisce la didascalia.
<figure>
<img src="struttura-html5.png"
alt="Diagramma della struttura semantica di una pagina HTML5">
<figcaption>
La struttura semantica di una pagina HTML5 con i principali elementi di layout.
</figcaption>
</figure>
<!-- Figure con blocco di codice -->
<figure>
<pre><code>
const saluto = 'Hello, HTML5!';
console.log(saluto);
</code></pre>
<figcaption>Esempio di dichiarazione di variabile in JavaScript moderno.</figcaption>
</figure>
<mark> — Per evidenziare testo rilevante:
<p>I <mark>tag semantici HTML5</mark> migliorano SEO e accessibilità.</p><details> e <summary> — Per contenuti espandibili senza JavaScript:
<details>
<summary>Mostra la lista completa dei tag semantici</summary>
<p>header, nav, main, article, section, aside, footer, time, address, figure...</p>
</details>Struttura Completa di una Pagina HTML5 Semantica
Ecco uno schema completo che puoi usare come punto di partenza per ogni progetto:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tag Semantici HTML5: Guida Completa (2026)</title>
<meta name="description" content="Guida completa ai tag semantici HTML5 con esempi pratici.">
<link rel="canonical" href="https://fabiogulotta.it/guida-html-semantico/">
</head>
<body>
<!-- Skip link per accessibilità da tastiera -->
<a href="#contenuto-principale" class="skip-link">Salta al contenuto</a>
<header>
<a href="/" aria-label="Home - Fabio Gulotta">
<img src="logo.svg" alt="Fabio Gulotta" width="150" height="50">
</a>
<nav aria-label="Navigazione principale">
<ul>
<li><a href="/blog">Blog</a></li>
<li><a href="/chi-sono">Chi Sono</a></li>
</ul>
</nav>
</header>
<main id="contenuto-principale">
<article>
<header>
<h1>Tag Semantici HTML5: Guida Completa (2026)</h1>
<time datetime="2026-02-28">28 febbraio 2026</time>
<address rel="author">
di <a href="/chi-sono">Fabio Gulotta</a>
</address>
</header>
<section>
<h2>Cos'è l'HTML Semantico</h2>
<p>...</p>
</section>
<section>
<h2>I Tag Principali</h2>
<p>...</p>
</section>
<footer>
<p>Categorie: <a href="/html">HTML</a>, <a href="/html5">HTML5</a></p>
</footer>
</article>
<aside aria-label="Articoli correlati">
<h2>Continua a leggere</h2>
<ul>
<li><a href="/html-vs-html5">HTML vs HTML5: Differenze Complete</a></li>
<li><a href="/struttura-pagina-html">Come Strutturare una Pagina HTML</a></li>
</ul>
</aside>
</main>
<footer>
<nav aria-label="Link legali">
<ul>
<li><a href="/privacy">Privacy Policy</a></li>
<li><a href="/cookie">Cookie Policy</a></li>
</ul>
</nav>
<p><small>© 2026 Fabio Gulotta</small></p>
</footer>
</body>
</html>Come gli Screen Reader Leggono l’HTML Semantico
Scrivere HTML semantico non è solo una buona pratica per i motori di ricerca. È, innanzitutto, una questione di inclusione: milioni di persone con disabilità visive utilizzano ogni giorno software chiamati screen reader per navigare il web. Inoltre, le linee guida internazionali WCAG — Web Content Accessibility Guidelines — richiedono una struttura HTML semantica come prerequisito fondamentale per la conformità ai livelli A e AA.
Gli screen reader sono software che convertono il contenuto visivo di una pagina web in audio o output Braille. I più diffusi sono NVDA e JAWS su Windows, e VoiceOver su macOS e iOS. Tuttavia, non leggono semplicemente il testo dall’alto verso il basso. Al contrario, usano la struttura semantica dell’HTML per costruire una mappa di navigazione interattiva.
Il documento come mappa di navigazione
Quando un utente apre una pagina con NVDA o JAWS, il software analizza innanzitutto i tag semantici presenti e costruisce una lista di punti di navigazione rapida. In particolare:
- I titoli h1, h2, h3 diventano navigabili con un singolo tasto — l’utente può saltare da titolo a titolo senza ascoltare tutto il testo intermedio
- Il tag nav viene annunciato come “regione di navigazione”
- Il tag main viene annunciato come “regione principale del documento”
- Il tag aside viene annunciato come “regione complementare”
- Il tag footer viene annunciato come “piè di pagina del documento”
In sintesi, un utente con screen reader può premere un singolo tasto per saltare direttamente al main, bypassando completamente header e navigazione. Questo è possibile solo se quei tag semantici esistono nel codice.
Prima e dopo: l’impatto concreto sul codice
Considera questo esempio senza tag semantici:
<!-- Senza semantica: lo screen reader legge tutto linearmente -->
<div class="header">
<div class="logo">Il mio sito</div>
<div class="nav">Home | Blog | Contatti</div>
</div>
<div class="content">
<div class="title">Come usare Flexbox</div>
<div class="text">Contenuto dell'articolo...</div>
</div>
<div class="sidebar">Articoli correlati...</div>
<div class="footer">Copyright 2026</div>In questo caso, lo screen reader legge tutto dall’alto verso il basso senza possibilità di navigazione rapida. L’utente è quindi costretto ad ascoltare header e navigazione ogni volta che apre una nuova pagina. Inoltre, non sa distinguere il contenuto principale dalla sidebar: entrambi sono semplici div anonimi.
Ora, invece, lo stesso layout con i tag semantici corretti:
<!-- Con semantica: navigazione immediata per l'utente -->
<header>
<a href="/" aria-label="Home - Il mio sito">Il mio sito</a>
<nav aria-label="Navigazione principale">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/contatti">Contatti</a></li>
</ul>
</nav>
</header>
<main id="contenuto-principale">
<article>
<h1>Come usare Flexbox</h1>
<p>Contenuto dell'articolo...</p>
</article>
</main>
<aside aria-label="Articoli correlati">
<h2>Continua a leggere</h2>
</aside>
<footer>
<p>Copyright 2026</p>
</footer>Con questa struttura, NVDA annuncia “intestazione, banner” quando incontra header, e “regione principale” quando raggiunge main. L’utente può saltare direttamente al contenuto con un tasto, ignorare la sidebar perché è identificata come “complementare” e navigare tra i titoli dell’articolo senza ascoltare tutto il testo. La differenza in termini di usabilità è radicale.
VoiceOver e il rotor
VoiceOver su iOS e macOS introduce inoltre il concetto di “rotor”: un controllo gestuale che permette di filtrare la navigazione per tipo di elemento. In particolare, l’utente può scegliere di navigare solo tra i titoli, solo tra i link, solo tra le regioni semantiche della pagina. Questo meccanismo funziona, tuttavia, solo se il codice HTML usa i tag corretti. Senza nav, main e article, il rotor rimane sostanzialmente vuoto e la navigazione torna ad essere lineare dall’alto verso il basso.
ARIA Roles e HTML Semantico: Quando Usarli Insieme
ARIA — Accessible Rich Internet Applications — è un insieme di attributi che aggiungono informazioni semantiche agli elementi HTML. Tuttavia, c’è una regola fondamentale da ricordare: non usare ARIA se esiste già un tag HTML semantico equivalente.
La regola d’oro dell’ARIA
Le specifiche W3C sono esplicite: “No ARIA is better than bad ARIA”. In altre parole, aggiungere ARIA in modo errato è peggio che non usarlo affatto, perché può confondere gli screen reader e creare esperienze di navigazione incoerenti.
Considera questi esempi di uso ridondante da evitare:
<!-- Ridondante: il tag nav già comunica il role navigation -->
<nav role="navigation">...</nav>
<!-- Ridondante: il tag button ha già il role implicito -->
<button role="button">Invia</button>
<!-- Ridondante: main ha già il role main -->
<main role="main">...</main>In tutti questi casi, il role ARIA è superfluo. Il tag semantico lo comunica già nativamente al browser e agli screen reader.
Quando ARIA è invece necessario
Esistono tuttavia situazioni in cui ARIA è indispensabile. In particolare, i componenti interattivi complessi — quelli che non hanno un equivalente HTML nativo — richiedono ARIA per essere accessibili. Ad esempio, un tab panel personalizzato:
<!-- Tab panel custom: ARIA è necessario -->
<div role="tablist" aria-label="Sezioni dell'articolo">
<button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">
Introduzione
</button>
<button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">
Esempi
</button>
</div>
<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">
Contenuto introduzione...
</div>
<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>
Contenuto esempi...
</div>Oppure un modal dialog:
<!-- Modal dialog: ARIA è necessario -->
<div role="dialog" aria-modal="true" aria-labelledby="modal-title">
<h2 id="modal-title">Conferma eliminazione</h2>
<p>Sei sicuro di voler eliminare questo elemento?</p>
<button>Conferma</button>
<button>Annulla</button>
</div>In sintesi: usa prima i tag semantici HTML5. Aggiungi ARIA solo dove i tag nativi non arrivano, e sempre seguendo le specifiche W3C per non peggiorare l’esperienza degli utenti con screen reader.
Checklist Accessibilità HTML: 8 Regole Pratiche
Di seguito trovi le 8 regole concrete da applicare a qualsiasi progetto HTML. Ogni regola ha un impatto diretto sull’esperienza degli utenti con disabilità visive.
1. Usa sempre un solo h1 per pagina Il tag h1 deve contenere il titolo principale con la keyword primaria. Tutti gli heading successivi seguono la gerarchia: h2 per le sezioni principali, h3 per i sottoparagrafi. Non saltare livelli — passare da h2 a h4 confonde gli screen reader, che si aspettano una struttura gerarchica coerente. VoiceOver e NVDA usano questa gerarchia per costruire il sommario navigabile della pagina.
2. Aggiungi main e lo skip link Lo skip link permette agli utenti da tastiera di saltare direttamente al contenuto principale, bypassando header e navigazione. È il primo elemento della pagina e deve essere visibile quando riceve il focus:
<a href="#contenuto-principale" class="skip-link">Salta al contenuto</a>
<main id="contenuto-principale">...</main>Senza skip link, un utente che naviga solo con la tastiera deve premere Tab decine di volte per raggiungere il contenuto ad ogni cambio di pagina.
3. Ogni nav deve avere un aria-label Se hai più elementi nav nella pagina — menu principale, breadcrumb, paginazione — distinguili con aria-label. In caso contrario, JAWS e NVDA annunciano semplicemente “regione di navigazione” senza specificare quale, e l’utente non sa dove si trova:
<nav aria-label="Navigazione principale">...</nav>
<nav aria-label="Breadcrumb">...</nav>
<nav aria-label="Paginazione">...</nav>4. Le immagini decorative usano alt vuoto Le immagini puramente decorative — separatori, sfondi, icone senza significato — devono avere un attributo alt vuoto. In questo modo gli screen reader le ignorano completamente, invece di leggere il nome del file o interrompere il flusso di lettura:
<!-- Immagine decorativa: screen reader la salta -->
<img src="decorazione.svg" alt="">
<!-- Immagine informativa: screen reader legge l'alt -->
<img src="schema-html5.webp" alt="Schema della struttura semantica HTML5">5. I link devono descrivere la destinazione Evita anchor text generici come “clicca qui”, “leggi di più” o “scopri”. Gli utenti con screen reader spesso navigano la pagina saltando di link in link — ascoltano solo il testo del link, senza il contesto circostante. Un link generico non comunica nulla:
<!-- Non accessibile -->
<a href="/guida-html">Leggi di più</a>
<!-- Accessibile -->
<a href="/guida-html">Leggi la guida completa ai tag semantici HTML5</a>6. Usa button per le azioni e a per la navigazione Questa distinzione è fondamentale per la navigazione da tastiera. Il tag button è attivabile con Spazio e Invio, il tag a solo con Invio. Inoltre, gli screen reader annunciano i due elementi in modo diverso — “collegamento” per a, “pulsante” per button. Invertirli crea aspettative sbagliate nell’utente:
<!-- Azione (apre modal, invia form): usa button -->
<button type="button">Apri il menu</button>
<!-- Navigazione (va a un URL): usa a -->
<a href="/contatti">Vai alla pagina contatti</a>7. I form richiedono label associati Ogni campo di input deve avere una label associata tramite gli attributi for e id. Senza label, lo screen reader annuncia solo il tipo di campo — “campo di testo” — senza dire all’utente cosa deve inserire. Questo rende i form praticamente inutilizzabili:
<!-- Senza label: lo screen reader annuncia solo "campo di testo" -->
<input type="email" name="email" placeholder="La tua email">
<!-- Con label: lo screen reader annuncia "Indirizzo email, campo di testo" -->
<label for="email">Indirizzo email</label>
<input type="email" id="email" name="email" required>8. Usa table solo per dati tabulari, mai per il layout Le tabelle usate per il layout creano una struttura confusa per gli screen reader, che leggono il contenuto cella per cella. Per il layout usa CSS Flexbox o Grid. Quando usi tabelle per dati reali, aggiungi sempre caption e th con attributo scope:
<table>
<caption>Confronto tra i principali screen reader</caption>
<thead>
<tr>
<th scope="col">Software</th>
<th scope="col">Sistema operativo</th>
<th scope="col">Gratuito</th>
</tr>
</thead>
<tbody>
<tr>
<td>NVDA</td><td>Windows</td><td>Sì</td>
</tr>
<tr>
<td>JAWS</td><td>Windows</td><td>No</td>
</tr>
<tr>
<td>VoiceOver</td><td>macOS / iOS</td><td>Sì</td>
</tr>
</tbody>
</table>Errori Comuni da Evitare
Questi sono i pattern sbagliati che vedo più spesso nel codice di developer italiani:
Usare <section> come <div> Section richiede sempre un titolo. Se non c’è un <h2> o simile, usa <div>.
<!-- ❌ Sbagliato -->
<section class="hero-banner">
<img src="hero.jpg" alt="...">
</section>
<!-- ✅ Corretto -->
<div class="hero-banner">
<img src="hero.jpg" alt="...">
</div>
Mettere tutto in <article> Article è per contenuti autonomi. La sidebar non è un article. Il footer non è un article.
<header> e <footer> multipli sbagliati Puoi averne più di uno nella pagina (uno per <body>, uno per <article>), ma non due al livello della pagina.
Ignorare <main> Molti sviluppatori saltano <main> e usano un <div id="content">. Questo penalizza l’accessibilità e perde un segnale SEO.
Nesting sbagliato di <nav> Non mettere <nav> dentro <nav>. Se hai navigazione annidata, usa liste annidate dentro un unico <nav>.
❌Omettere aria-label con più <nav> o <aside>
Senza aria-label, gli screen reader annunciano semplicemente “navigazione” per ogni <nav> — l’utente non sa quale sia la principale.
❌ Mettere l’<h1> fuori dall’<article>
In una pagina con un solo articolo, l’<h1> va dentro l’<article>, non come figlio diretto di <main>.
❌ Usare <article> per ogni card di una lista
Se le card in una lista hanno senso solo nel contesto della lista (es. i passaggi di un tutorial), non sono <article> — sono <li> dentro <ol>.
HTML Semantico e SEO: Cosa Dice Google
Google usa i tag semantici per costruire la comprensione della pagina. Nello specifico:
Il tag <article> indica un contenuto autonomo e indicizzabile. Il contenuto dentro <main> ha priorità rispetto a quello in <aside>. Gli heading (<h1>, <h2>…) dentro strutture semantiche corrette comunicano la gerarchia dei topic. Il tag <time> con attributo datetime aiuta Google a datare il contenuto correttamente, importante per ricerche con filtro temporale.
Non esiste una penalizzazione diretta per chi non usa la semantica. Ma chi la usa correttamente dà a Google più segnali per capire, classificare e posizionare il contenuto.
FAQ
<div> e i tag semantici HTML5? Il tag <div> è un contenitore generico senza significato: il browser e Google non sanno cosa contiene. I tag semantici HTML5, invece, comunicano il ruolo del contenuto. Ad esempio, <article> dice “questo è un contenuto autonomo”, <nav> dice “questi sono link di navigazione”. In sintesi, i tag semantici rendono il codice comprensibile a browser, motori di ricerca e screen reader.
Non sono un fattore di ranking diretto, ma influenzano il posizionamento in modo indiretto. Innanzitutto, aiutano Google a capire la struttura e la gerarchia dei contenuti. Inoltre, migliorano l’accessibilità, che è un segnale di qualità. In particolare, tag come <article>, <main> e <time> con l’attributo datetime forniscono ai crawler informazioni più precise sul contenuto della pagina.
<section> al posto di <div>? Non sempre. <section> va usato solo quando il blocco di contenuto ha un titolo (<h2>, <h3>…) e rappresenta una divisione tematica logica. Se invece hai bisogno di un contenitore solo per ragioni di stile o layout, <div> rimane la scelta corretta. In sintesi: section per la struttura semantica, div per il layout.
<h1> posso usare in una pagina HTML5? Tecnicamente HTML5 consente più <h1> se ciascuno si trova dentro una sezione semantica distinta (come <article> o <section>). Tuttavia, per il SEO è consigliabile usare un solo <h1> per pagina — quello che contiene la keyword principale. Gli heading successivi devono quindi seguire la gerarchia: <h2> per le sezioni principali, <h3> per i sottoparagrafi.
Conclusione
I tag semantici HTML5 non richiedono librerie esterne, non aggiungono peso alla pagina e non complicano il CSS. Sono semplicemente il modo corretto di scrivere HTML.
L’HTML semantico e l’accessibilità non sono due argomenti separati: sono, in realtà, due facce della stessa medaglia. Scrivere codice con i tag giusti significa, quindi, costruire pagine che funzionano per tutti — con o senza disabilità visive, con o senza mouse, su qualsiasi dispositivo e con qualsiasi tecnologia assistiva.
I tag semantici HTML5 non sono decorazioni. Sono un contratto tra te e chi legge la tua pagina — browser, Google, screen reader, altri sviluppatori.
Usarli correttamente richiede una domanda prima di ogni blocco: qual è il ruolo di questo contenuto nella pagina? Non qual è il suo stile, non come appare — ma cosa significa.
Il passo successivo: apri uno dei tuoi vecchi progetti e controlla quanti <div> potresti sostituire con tag semantici. Spesso bastano pochi minuti per migliorare significativamente struttura, accessibilità e leggibilità del codice.
Articoli correlati in questa guida:
- HTML vs HTML5: differenze ed esempi
- Checklist SEO per HTML
- HTML5 e performance: dove guadagni davvero
