Tag semantici: header, nav, main, article, section, footer, aside

Come organizzare una pagina con elementi che descrivono il significato delle sue parti.

HTML semantico significa scegliere elementi che descrivono il ruolo del contenuto, non solo il modo in cui apparira’ sullo schermo.

Un <div> dice solo: “qui c’è un contenitore”. Un <nav> dice: “qui c’è una navigazione”. Un <main> dice: “qui c’è il contenuto principale della pagina”. Questa differenza aiuta browser, motori di ricerca, strumenti di lettura e persone che useranno il tuo codice in futuro.

Perché non usare `<div>` per tutto

Tecnicamente potresti costruire una pagina intera con soli <div>.

<div class="header">...</div>
<div class="menu">...</div>
<div class="contenuto">...</div>
<div class="footer">...</div>

Il problema è che il significato vive solo nei nomi delle classi. Il browser non sa davvero che .menu è una navigazione o che .contenuto è la parte principale.

Con i tag semantici, invece, il significato entra nella struttura:

<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>

I tag principali

<header>: intestazione di una pagina o di una sezione. Può contenere logo, titolo, introduzione o navigazione.
<nav>: blocco con link di navigazione principali o secondari.
<main>: contenuto principale del documento. In una pagina dovrebbe esserci un solo <main> visibile.
<article>: contenuto autonomo che avrebbe senso anche fuori dalla pagina, come un post, una card articolo, una recensione o una scheda progetto.
<section>: gruppo tematico di contenuti, di solito con un titolo.
<aside>: contenuto collegato ma non centrale, come una sidebar, note, link correlati o box di approfondimento.
<footer>: chiusura di una pagina o di una sezione, con copyright, link secondari, autore o informazioni di contatto.

`section` o `article`?

Usa <article> quando il contenuto è autonomo.

<article>
  <h2>Come ho costruito il mio portfolio</h2>
  <p>Un breve racconto del progetto...</p>
</article>

Usa <section> quando stai dividendo una pagina in parti tematiche.

<section>
  <h2>Progetti recenti</h2>
  <article>...</article>
  <article>...</article>
</section>

In questo esempio la sezione raggruppa i progetti, mentre ogni progetto può essere un articolo autonomo.

Struttura completa

<body>
  <header>
    <a href="/">Mario Rossi</a>
    <nav aria-label="Navigazione principale">
      <a href="#progetti">Progetti</a>
      <a href="#contatti">Contatti</a>
    </nav>
  </header>

  <main>
    <section>
      <h1>Sviluppatore web front-end</h1>
      <p>Creo interfacce accessibili e responsive.</p>
    </section>

    <section id="progetti">
      <h2>Progetti</h2>
      <article>
        <h3>Portfolio personale</h3>
        <p>Pagina responsive realizzata in HTML e CSS.</p>
      </article>
    </section>
  </main>

  <footer>
    <p>&copy; 2026 Mario Rossi</p>
  </footer>
</body>

Errori comuni

Usare <section> solo per creare spazio grafico. Se non riesci a darle un titolo sensato, forse è un <div>.
Mettere più <main> visibili nella stessa pagina.
Usare <nav> per qualsiasi lista di link. Riservalo ai blocchi di navigazione importanti.
Scegliere il tag in base allo stile predefinito. Lo stile si cambia con CSS; il tag deve descrivere il significato.

Esercizio

Prendi una pagina semplice con intestazione, menu, contenuto, una lista di progetti e footer. Riscrivila usando almeno header, nav, main, section, article e footer. Poi controlla se la pagina si capisce anche leggendo solo i tag principali.

Perché non usare <div> per tutto