Introduzione
I tag semantici principali di HTML non servono solo a “dare ordine” al codice: aiutano a definire il significato delle varie aree di una pagina. Tra i più utili troviamo <header>, <main>, <footer> e <section>. Usarli bene rende il documento più chiaro per chi legge il codice, per i motori di ricerca e per le tecnologie assistive come gli screen reader.
In questo tutorial vedremo un sotto-argomento molto pratico: come costruire la struttura base di una pagina contenuti con intestazione, area centrale, sezioni tematiche e piè di pagina. È una competenza fondamentale quando sviluppi landing page, blog, pagine prodotto o dashboard informative.
L’obiettivo non è solo “mettere i tag giusti”, ma capire quando usarli e come combinarli in modo pulito e coerente.
Codice completo
<header>
<h1>TechLab Academy</h1>
<p>Guide pratiche per imparare sviluppo web con esempi reali.</p>
</header>
<main>
<section>
<h2>Ultimi articoli</h2>
<p>Una selezione di contenuti tecnici pensati per studenti e sviluppatori intermedi.</p>
<ul>
<li>HTML semantico: costruire pagine più leggibili</li>
<li>CSS Grid per layout moderni</li>
<li>Form HTML accessibili</li>
</ul>
</section>
<section>
<h2>Perché usare i tag semantici</h2>
<p>Aiutano a descrivere il ruolo di ogni blocco della pagina, migliorando manutenzione e accessibilità.</p>
</section>
<section>
<h2>Contenuti in evidenza</h2>
<p>Qui puoi inserire card, articoli, statistiche o blocchi informativi dedicati.</p>
</section>
</main>
<footer>
<p>© 2026 TechLab Academy. Tutti i diritti riservati.</p>
<p>Email: [email protected]</p>
</footer>Spiegazione
Vediamo il ruolo di ciascun elemento in modo concreto.
<header>
<header> rappresenta l’intestazione di una pagina o di una sezione. Nella maggior parte dei casi contiene:
- il titolo principale della pagina (<h1>);
- un sottotitolo o una breve descrizione;
- eventualmente logo, ricerca o navigazione.
Nel nostro esempio, il header introduce il sito con il nome del progetto e una frase descrittiva. Questo aiuta l’utente a capire subito dove si trova e di cosa parla la pagina.
<main>
<main> identifica il contenuto centrale e unico della pagina. È importante perché indica chiaramente qual è la parte più rilevante del documento. In una pagina ben strutturata dovrebbe esserci un solo <main>.
Dentro <main> mettiamo il contenuto variabile della pagina: articoli, schede prodotto, dashboard, moduli, documentazione. Nel nostro esempio, il main contiene tre sezioni tematiche diverse.
<section>
<section> serve a raggruppare contenuti correlati. È utile quando vuoi dividere il contenuto principale in blocchi logici con un proprio titolo.
Ogni section dovrebbe avere un’intestazione interna, di solito un <h2> o un livello successivo come <h3>, se sei dentro una struttura più profonda.
Nel codice di esempio, ogni sezione ha un tema preciso:
- Ultimi articoli;
- Perché usare i tag semantici;
- Contenuti in evidenza.
Questa scelta rende la pagina più facile da scansionare visivamente e più comprensibile anche per i software che analizzano la struttura del documento.
<footer>
<footer> contiene informazioni finali della pagina o della sezione: copyright, contatti, link utili, note legali, social. Nel nostro esempio c’è una chiusura semplice con copyright ed email.
Come <header>, anche <footer> può comparire più volte in una pagina, ad esempio all’interno di una sezione specifica. Ma il footer principale della pagina è quello che chiude il contenuto globale.
La combinazione di questi quattro tag crea una struttura molto solida:
- header = introduce;
- main = ospita il contenuto principale;
- section = organizza il contenuto in aree tematiche;
- footer = conclude e fornisce informazioni finali.
Best practice
- Usa un solo <main> per pagina: deve rappresentare il contenuto principale, non una semplice colonna del layout.
- Dai sempre un titolo alle <section>: senza un heading, una section rischia di essere poco significativa. Se non hai un titolo, forse ti serve un <div> invece di una section.
- Non usare <header> solo per il logo: il tag ha un ruolo semantico, non solo visivo. Deve introdurre un contenuto o una sezione.
- Evita di annidare sezioni inutilmente: ogni livello deve avere una logica chiara. Troppe section senza motivo complicano la struttura.
- Scrivi heading coerenti: usa <h1> per il titolo principale e poi <h2>, <h3> in ordine gerarchico.
- Non confondere struttura e stile: questi tag descrivono il significato del contenuto, mentre l’aspetto grafico va gestito con CSS.
Un errore comune è usare <section> per qualsiasi blocco solo perché “sembra ordinato”. In realtà la section ha senso quando il blocco rappresenta un tema autonomo o una porzione chiaramente identificabile del contenuto.
Riepilogo
Per costruire una pagina HTML chiara e robusta, i tag <header>, <main>, <footer> e <section> sono un punto di partenza essenziale.
- <header> introduce la pagina o una sua parte;
- <main> contiene il contenuto principale;
- <section> organizza i contenuti in blocchi tematici;
- <footer> chiude la pagina con informazioni finali.
Se li usi con criterio, ottieni documenti più leggibili, più accessibili e più facili da mantenere. È una base solida per qualunque progetto web, dal blog personale al sito aziendale.
Approfondisci con risorse ufficiali
- MDN Web Docs - <header>: documentazione completa sull’elemento header e sui suoi contesti d’uso.
- MDN Web Docs - <main>: guida ufficiale per definire correttamente il contenuto principale.
- MDN Web Docs - <footer>: dettagli su utilizzo e significato semantico del footer.
- MDN Web Docs - <section>: spiegazione approfondita su quando usare section e quando preferire altri elementi.
- W3C HTML Living Standard: riferimento tecnico ufficiale per la semantica HTML.
Se vuoi fare un passo ulteriore, prova a prendere una pagina già esistente e riscriverne la struttura usando questi tag: è un ottimo esercizio per imparare a ragionare in termini semantici, non solo visivi.