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.
In questa guida trovi tutto quello che ti serve: la teoria, i tag principali con esempi pratici, gli errori comuni e come strutturare una pagina HTML5 moderna nel 2026.
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:
html
<div class="intestazione">Benvenuto nel mio sito</div>Con semantica:
html
<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.
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.
<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.
html
<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.
<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).
html
<!-- 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.
<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>.
html
<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.
<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>.
html
<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><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.
html
<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>Regola pratica: usa <section> solo se il blocco ha un titolo (<h2>, <h3>…). Senza titolo, probabilmente è meglio un <div>.
<aside>
Contiene informazioni correlate ma non essenziali al contenuto principale: sidebar, box informativi, pubblicità, widget correlati.
html
<!-- 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><footer>
Rappresenta il piè di pagina della pagina o di una sezione. Contiene tipicamente copyright, link legali, contatti, sitemap secondaria.
html
<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:
html
<time datetime="2026-02-28">28 febbraio 2026</time><address> — Per informazioni di contatto dell’autore:
html
<address>
Scrivi a: <a href="mailto:info@fabiogulotta.it">info@fabiogulotta.it</a>
</address><figure> e <figcaption> — Per immagini con didascalia:
html
<figure>
<img src="schema-html5.webp" alt="Schema struttura HTML5" width="800" height="450">
<figcaption>La struttura semantica di una pagina HTML5 moderna</figcaption>
</figure><mark> — Per evidenziare testo rilevante:
html
<p>I <mark>tag semantici HTML5</mark> migliorano SEO e accessibilità.</p><details> e <summary> — Per contenuti espandibili senza JavaScript:
html
<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:
html
<!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>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>.
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>.
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 nel 2026.
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:
