Guida HTML interattiva: HTML semantico

Q: Quali sono i tag semantici in HTML?

I tag di layout sono , , , , , e . Altri tag semantici comuni sono , , , , , e i titoli da a .

Q: Il div è un elemento semantico?

No. non ha un significato proprio; è un contenitore generico per lo stile e il layout. Usalo quando nessun tag semantico è adatto, e usa , , e gli altri quando uno lo è.

Q: Quanti elementi main può avere una pagina?

Un solo visibile per pagina. Racchiude il contenuto specifico di quella pagina, e non deve stare dentro , , , o .

Cos'è l'HTML semantico

HTML semantico significa scegliere ogni tag in base a cosa è il contenuto: la navigazione va in <nav>, il contenuto principale in <main>, un post di un blog in <article>. I tag sembrano semplici riquadri, ma dicono a browser, screen reader e motori di ricerca cosa fa ogni parte della pagina. Ecco una pagina completa costruita con i tag semantici di layout, ognuno con un bordo e un'etichetta:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Semantic layout</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    header, nav, main, article, aside, footer {
      border: 2px dashed #2563eb; padding: 8px; margin: 6px 0;
    }
    header::before, nav::before, main::before,
    article::before, aside::before, footer::before {
      display: block; font: 12px monospace; color: #2563eb;
    }
    header::before { content: "<header>"; }
    nav::before { content: "<nav>"; }
    main::before { content: "<main>"; }
    article::before { content: "<article>"; }
    aside::before { content: "<aside>"; }
    footer::before { content: "<footer>"; }
    .cols { display: flex; gap: 8px; }
    .cols article { flex: 2; }
    .cols aside { flex: 1; }
  </style>
</head>
<body>
  <header>
    <strong>My Blog</strong>
    <nav><a href="#">Home</a> | <a href="#">Posts</a> | <a href="#">About</a></nav>
  </header>
  <main>
    <div class="cols">
      <article>
        <h1>Learning HTML</h1>
        <p>A post about semantic tags.</p>
      </article>
      <aside>Related posts</aside>
    </div>
  </main>
  <footer>&copy; 2026 My Blog</footer>
</body>
</html>

Cancella l'elemento <style> e la pagina sembra testo semplice, ma la struttura resta lì per chi legge il codice e per il software che lo legge senza guardare i pixel.

I tag semantici di layout

Tag	Usalo per	Landmark per lo screen reader
`<header>`	L'introduzione della pagina o di un articolo: logo, titolo, autore	banner (solo quando non è dentro `article`, `aside`, `main`, `nav` o `section`)
`<nav>`	Un blocco di link di navigazione principali	navigation
`<main>`	Il contenuto specifico di questa pagina, una volta per pagina	main
`<article>`	Un pezzo autonomo che ha senso da solo: un post, un commento, la scheda di un prodotto	nessuno per impostazione predefinita
`<section>`	Un gruppo tematico di contenuti con un proprio titolo	region, solo quando ha un nome accessibile
`<aside>`	Contenuti correlati accanto al flusso principale: una barra laterale, una nota	complementary
`<footer>`	Informazioni di chiusura della pagina o di un articolo: copyright, autore, link	contentinfo (solo a livello di pagina)

Ogni tag ha una sua pagina con più dettagli: header, nav, section e footer. Questa pagina spiega come si combinano.

Perché non usare solo div

Una pagina fatta solo di elementi <div> può sembrare identica a una semantica. La differenza è ciò che dice il markup. Premi i pulsanti per evidenziare gli elementi che hanno un significato in ciascuna versione:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs semantic</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .page { border: 1px solid #e5e7eb; padding: 6px; margin-bottom: 10px; }
    .page > * { padding: 4px 8px; background: #f3f4f6; margin: 4px 0; }
    .on { outline: 3px solid #16a34a; }
  </style>
</head>
<body>
  <div class="page" id="divs">
    <div class="header">Site name</div>
    <div class="nav"><a href="#">Home</a> <a href="#">Posts</a></div>
    <div class="main">Page content</div>
    <div class="footer">Footer</div>
  </div>
  <div class="page" id="semantic">
    <header>Site name</header>
    <nav><a href="#">Home</a> <a href="#">Posts</a></nav>
    <main>Page content</main>
    <footer>Footer</footer>
  </div>
  <button onclick="mark('divs')">Outline meaning in div version</button>
  <button onclick="mark('semantic')">Outline meaning in semantic version</button>
  <p id="out"></p>
  <script>
    function mark(id) {
      document.querySelectorAll('.on').forEach(el => el.classList.remove('on'));
      const found = document.querySelectorAll('#' + id + ' :is(header, nav, main, aside, article, footer)');
      found.forEach(el => el.classList.add('on'));
      document.getElementById('out').textContent = found.length + ' semantic elements found';
    }
  </script>
</body>
</html>

La versione con i div ne trova 0, quella semantica ne trova 4. È ciò che vedono le tecnologie assistive: chi usa uno screen reader può saltare direttamente alla navigazione o al contenuto principale nella pagina semantica, e deve leggere tutto nella pagina fatta di div. Nomi di classe come class="nav" per il browser non significano niente.

<div> resta la scelta giusta per i riquadri che esistono solo per lo stile o il layout, come il contenitore flex .cols del primo esempio.

main, article e aside

<main> racchiude ciò che è specifico di questa pagina e compare una volta sola. Al suo interno, <article> indica un contenuto che avrebbe senso copiato da solo su un altro sito, e <aside> indica un contenuto correlato che si potrebbe togliere senza rovinare l'articolo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>article and aside</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 2px solid #e5e7eb; padding: 0 12px; }
    aside.note {
      float: inline-end; width: 40%; margin: 0 0 8px 12px;
      background: #fef3c7; border: 1px solid #f59e0b; padding: 8px; font-size: 14px;
    }
    time { color: #6b7280; }
  </style>
</head>
<body>
  <main>
    <article>
      <header>
        <h1>Baking bread at home</h1>
        <p>By Dana, <time datetime="2026-09-24">September 24, 2026</time></p>
      </header>
      <aside class="note">
        <strong>Note:</strong> flour types vary, so adjust the water a little.
      </aside>
      <p>Mix flour, water, salt and yeast. Knead for ten minutes, then let the dough rise for an hour.</p>
      <p>Shape the loaf and bake it at 230&deg;C until the crust is dark.</p>
      <footer>Filed under: cooking</footer>
    </article>
  </main>
</body>
</html>

L'articolo ha il suo <header> e il suo <footer>. Non sono limitati al livello della pagina: ognuno introduce o chiude l'article o la section più vicina. L'elemento <time datetime> dà la data in una forma leggibile dalle macchine mentre la mostra in una forma leggibile dalle persone.

Controllare la struttura dei titoli

I titoli sono l'altra metà della struttura. Chi usa uno screen reader spesso si muove nella pagina di titolo in titolo, quindi i livelli devono leggersi come un indice senza livelli saltati. Questo script stampa la struttura della pagina in cui viene eseguito:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Outline</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    pre { background: #111827; color: #e5e7eb; padding: 10px; }
  </style>
</head>
<body>
  <h1>Coffee guide</h1>
  <h2>Beans</h2>
  <h3>Arabica</h3>
  <h3>Robusta</h3>
  <h2>Brewing</h2>
  <h4>French press</h4>
  <pre id="outline"></pre>
  <script>
    const lines = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')].map(h => {
      const level = Number(h.tagName[1]);
      return '  '.repeat(level - 1) + h.tagName + ' ' + h.textContent;
    });
    document.getElementById('outline').textContent = lines.join('\n');
  </script>
</body>
</html>

L'h4 sotto "Brewing" salta un livello. Cambialo in h3 e la struttura si legge in modo pulito. Scegli i livelli dei titoli in base alla struttura, e cambiane la dimensione con il CSS se li vuoi più grandi o più piccoli.

Altri tag semantici

La semantica non riguarda solo il layout. Anche questi tag di testo hanno un significato:

Tag	Significato
`<strong>`	Testo importante (in grassetto per impostazione predefinita)
`<em>`	Enfasi (in corsivo per impostazione predefinita)
`<figure>` e `<figcaption>`	Un'immagine, un grafico o un esempio di codice con la sua didascalia
`<time datetime="...">`	Una data o un orario in forma leggibile dalle macchine
`<address>`	I recapiti dell'autore della pagina o dell'articolo
`<mark>`	Testo evidenziato, come un risultato di ricerca
`<abbr title="...">`	Un'abbreviazione con la sua forma estesa
`<button>`	Qualcosa che esegue un'azione

<!DOCTYPE html>
<figure style="margin: 0; border: 1px solid #e5e7eb; padding: 8px; display: inline-block;">
  <img alt="Blue square" width="120" height="80"
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Crect width='120' height='80' fill='%232563eb'/%3E%3C/svg%3E">
  <figcaption>Figure 1: a caption tied to its image.</figcaption>
</figure>
<p>Search results for <mark>semantic</mark>. The <abbr title="World Wide Web Consortium">W3C</abbr> writes web standards.</p>

Passa il mouse sull'abbreviazione "W3C" per vedere la forma estesa in un tooltip.

Errori comuni

Usare un tag per il suo aspetto. <blockquote> serve per le citazioni, non per il rientro; <h3> serve per un livello di titolo, non per un testo in grassetto di media grandezza. Dai lo stile con il CSS.
Racchiudere tutto in <section>. Una section dovrebbe avere un titolo e un tema. Se ti serve un contenitore per lo stile, usa <div>.
Più di un <main> visibile. Tienine uno per pagina, e non annidarlo mai dentro <article>, <aside>, <header>, <nav> o <footer>.
Mettere ogni lista di link in <nav>. Riservalo ai blocchi di navigazione principali, come il menu del sito o un indice. Qualche link in un footer non ne ha bisogno.
Elementi <div> cliccabili. Un <div onclick> non si raggiunge con la tastiera. Usa <button> per le azioni e <a href> per la navigazione.

Domande frequenti

Cos'è l'HTML semantico?

L'HTML semantico è un markup in cui ogni tag descrive il significato del suo contenuto: <nav> per la navigazione, <article> per un pezzo autonomo, <button> per un pulsante. Browser, screen reader e motori di ricerca possono così capire la pagina senza tirare a indovinare da nomi di classi o stili.

Quali sono i tag semantici in HTML?

I tag di layout sono <header>, <nav>, <main>, <article>, <section>, <aside> e <footer>. Altri tag semantici comuni sono <figure>, <figcaption>, <time>, <address>, <strong>, <em> e i titoli da <h1> a <h6>.

Il div è un elemento semantico?

No. <div> non ha un significato proprio; è un contenitore generico per lo stile e il layout. Usalo quando nessun tag semantico è adatto, e usa <header>, <main>, <nav> e gli altri quando uno lo è.

A cosa serve il tag aside?

<aside> contiene contenuti legati al contenuto principale ma che non fanno parte del suo flusso: una barra laterale, un riquadro di link correlati, una nota di glossario o una citazione in evidenza. A livello di pagina, gli screen reader lo elencano come landmark complementare.

Quanti elementi main può avere una pagina?

Un solo <main> visibile per pagina. Racchiude il contenuto specifico di quella pagina, e non deve stare dentro <header>, <nav>, <article>, <aside> o <footer>.

L'HTML semantico aiuta la SEO?

Aiuta i motori di ricerca a capire quale parte della pagina è il contenuto principale, quale è la navigazione e come sono collegati i titoli. Da solo non è una scorciatoia per il posizionamento, ma elimina le ambiguità e migliora l'accessibilità, che vale comunque la pena curare.

Concetti correlati