Struttura semantica di una pagina HTML5 con tag header, main, article, section, aside e footer visualizzati come blocchi colorati

Tag Semantici HTML5: Come Usarli Davvero (Guida 2026)

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 la spiegazione di ogni tag semantico HTML5 con regole chiare, esempi pratici e i casi in cui non dovresti usarli.

Cosa sono i tag semantici HTML5 e perché esistono

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.

Il risultato pratico:

  • Il browser può costruire un modello della pagina più accurato.
  • Google può distinguere contenuto principale, navigazione ed elementi accessori senza dover fare inferenze.
  • Gli screen reader possono navigare la pagina per landmark, migliorando l’accessibilità per utenti con disabilità visive.

La mappa completa dei tag semantici HTML5

TagRuoloQuante volte per pagina
<header>Intestazione di pagina o sezionePiù di uno (uno per <article>)
<nav>Navigazione principale o secondariaPiù di uno
<main>Contenuto principale della paginaUno solo
<article>Contenuto autonomo e redistribuibilePiù di uno
<section>Sezione tematica con heading proprioPiù di uno
<aside>Contenuto correlato ma non essenzialePiù di uno
<footer>Piè di pagina o di sezionePiù di uno (uno per <article>)
<figure> + <figcaption>Contenuto illustrativo con didascaliaPiù di uno
<time>Data o orario leggibile dalla macchinaPiù di uno
<address>Informazioni di contatto dell’autorePiù di uno

<header>: intestazione di pagina o di sezione

<header> rappresenta l’intestazione introduttiva di una pagina o di una sezione. Tipicamente contiene logo, titolo del sito, navigazione principale e — se dentro un <article> — il titolo dell’articolo, l’autore e la data.

<!-- Header di pagina -->
<header>
  <a href="/" aria-label="Homepage">
    <img src="logo.svg" alt="Logo Sito">
  </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>

<!-- Header dentro un article -->
<article>
  <header>
    <h1>Titolo dell'articolo</h1>
    <p>Di <a href="/autore">Fabio Gulotta</a> — <time datetime="2026-02-23">23 febbraio 2026</time></p>
  </header>
  <!-- corpo dell'articolo -->
</article>

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>: navigazione principale e secondaria

<nav> identifica un blocco di link di navigazione. Non tutti i gruppi di link richiedono <nav> — solo quelli che rappresentano navigazione significativa della pagina o del sito.

<!-- Navigazione principale -->
<nav aria-label="Navigazione principale">
  <ul>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/guide">Guide</a></li>
    <li><a href="/contatti">Contatti</a></li>
  </ul>
</nav>

<!-- Navigazione secondaria (breadcrumb) -->
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/html">HTML</a></li>
    <li aria-current="page">Tag semantici HTML5</li>
  </ol>
</nav>

Regole pratiche

  • Usa aria-label per 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>: il contenuto principale — uno solo per pagina

<main> identifica il contenuto principale della pagina — quello unico per quella URL, escluso header, footer e sidebar. È l’elemento più importante per SEO e accessibilità: dice a Google e agli screen reader esattamente dove inizia il contenuto editoriale.

<body>
  <header>...</header>
  <nav>...</nav>

  <main>
    <h1>Tag Semantici HTML5: Come Usarli Davvero</h1>
    <p>Contenuto principale dell'articolo...</p>
  </main>

  <aside>...</aside>
  <footer>...</footer>
</body>

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>: contenuto autonomo e redistribuibile

<article> rappresenta un contenuto che ha senso anche isolato dal resto della pagina — un post di blog, una scheda prodotto, un commento, una notizia, una recensione. La domanda da porsi è: questo contenuto avrebbe senso pubblicato altrove, in un feed RSS o condiviso sui social? Se sì, è un <article>.

<main>
  <article>
    <header>
      <h1>Come usare Flexbox in CSS</h1>
      <time datetime="2026-01-15">15 gennaio 2026</time>
    </header>

    <p>Flexbox è un sistema di layout CSS che...</p>

    <section>
      <h2>Proprietà del container</h2>
      <p>...</p>
    </section>

    <section>
      <h2>Proprietà degli item</h2>
      <p>...</p>
    </section>

    <footer>
      <p>Autore: <a href="/fabio">Fabio Gulotta</a></p>
    </footer>
  </article>
</main>

<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>: sezione tematica con heading proprio

<section> raggruppa contenuto tematicamente correlato all’interno di un <article> o della pagina. A differenza di <article>, il contenuto di una <section> non ha senso isolato — dipende dal contesto in cui si trova.

<article>
  <h1>Guida completa a CSS Grid</h1>

  <section>
    <h2>Cos'è CSS Grid</h2>
    <p>CSS Grid è un sistema di layout bidimensionale...</p>
  </section>

  <section>
    <h2>Grid container e grid items</h2>
    <p>Per attivare Grid, applica display: grid al container...</p>
  </section>

  <section>
    <h2>Esempi pratici</h2>
    <p>Vediamo tre layout comuni realizzati con Grid...</p>
  </section>
</article>

<section> vs <div>: la regola d’oro

La distinzione più difficile da capire è questa. Usa <section> se:

  1. Il blocco ha un heading proprio (H2, H3…).
  2. Il blocco rappresenta una parte tematica distinta del contenuto.
  3. 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>: contenuto correlato ma non essenziale

<aside> rappresenta contenuto tangenzialmente correlato al contenuto principale — una sidebar, un box di approfondimento, una citazione, una pubblicità, widget correlati. Se rimuovessi l’<aside>, il contenuto principale avrebbe ancora senso completo.

<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> contiene informazioni di chiusura per il suo elemento padre — copyright, link legali, informazioni sull’autore, link correlati. Come <header>, può comparire più volte nella stessa pagina.

<!-- Footer di pagina -->
<footer>
  <p>© 2026 Fabio Gulotta — <a href="/privacy">Privacy Policy</a></p>
  <nav aria-label="Link footer">
    <a href="/contatti">Contatti</a>
    <a href="/chi-sono">Chi sono</a>
  </nav>
</footer>

<!-- Footer di un article -->
<article>
  <h1>Titolo articolo</h1>
  <p>Corpo...</p>
  <footer>
    <p>Pubblicato da <a href="/autore">Fabio Gulotta</a></p>
    <p>Tag: <a href="/tag/html5">HTML5</a>, <a href="/tag/seo">SEO</a></p>
  </footer>
</article>

<figure> e <figcaption>: immagini con contesto

<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>

<time>: date leggibili dalla macchina

<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>

La struttura completa di una pagina HTML5 semantica

Mettendo insieme tutto, una pagina HTML5 ben strutturata si presenta così:

<!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 | fabiogulotta.it</title>
</head>
<body>

  <header>
    <a href="/" aria-label="Homepage">
      <img src="logo.svg" alt="Fabio Gulotta">
    </a>
    <nav aria-label="Navigazione principale">
      <ul>
        <li><a href="/blog">Blog</a></li>
        <li><a href="/guide">Guide</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h1>Tag Semantici HTML5: Come Usarli Davvero</h1>
        <p>Di <a href="/autore">Fabio Gulotta</a> —
           <time datetime="2026-02-23">23 febbraio 2026</time></p>
      </header>

      <section>
        <h2>Cosa sono i tag semantici</h2>
        <p>...</p>
      </section>

      <section>
        <h2>Quando usare article vs section</h2>
        <p>...</p>
        <aside>
          <p>💡 Regola rapida: se il contenuto ha senso isolato, è un article.</p>
        </aside>
      </section>

      <footer>
        <p>Tag: <a href="/tag/html5">HTML5</a></p>
      </footer>
    </article>

    <aside aria-label="Sidebar">
      <h2>Articoli correlati</h2>
      <ul>
        <li><a href="/html-vs-html5">HTML vs HTML5: guida completa</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>© 2026 fabiogulotta.it — <a href="/privacy">Privacy Policy</a></p>
  </footer>

</body>
</html>

Errori comuni da evitare

❌ Usare <section> come <div> stilistico

<!-- ❌ Sbagliato -->
<section class="hero-banner">
  <img src="hero.jpg" alt="...">
</section>

<!-- ✅ Corretto -->
<div class="hero-banner">
  <img src="hero.jpg" alt="...">
</div>

❌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>.

Conclusione

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.

Una volta che hai questa mentalità, la struttura semantica viene naturale. E il codice che scrivi diventa più chiaro, più accessibile e più comprensibile per i motori di ricerca — senza trucchi.

Esplora tutta la serie su HTML5

Tag

Articoli correlati

Di tendenza

Illustrazione di un agente AI che lavora autonomamente su un computer mentre l'utente dorme
L’AI che lavora mentre dormi: cos’è OpenClaw e perché dovresti fare attenzione
Illustrazione hero per articolo: Guida HTML Semantico
Guida HTML Semantico
Illustrazione hero per articolo: Come usare Flexbox passo passo
Flexbox Tutorial CSS: Guida Completa ai Layout Moderni
Illustrazione astratta blu con simboli CSS e linee geometriche
Cos’è il CSS Grid e come funziona