Introduzione
I tag semantici principali di HTML, come <header>, <main>, <footer> e <section>, non servono solo a “fare ordine” nel codice: aiutano a descrivere il significato del contenuto. Questo rende la pagina più chiara per chi sviluppa, più comprensibile per i motori di ricerca e più robusta per tecnologie assistive come gli screen reader.
In questo tutorial vediamo un sotto-argomento molto pratico: come usare questi tag per creare una struttura di pagina facilmente manutenibile nel tempo. È un tema utile quando un progetto cresce, quando più persone lavorano sullo stesso codice o quando vuoi evitare layout confusi e difficili da aggiornare.
L’obiettivo non è solo “scrivere HTML corretto”, ma creare una base solida per pagine web che si possano estendere con facilità. Vedremo un esempio reale di pagina con intestazione, contenuto principale diviso in sezioni e piè di pagina, poi analizzeremo il ruolo di ogni tag e le best practice da seguire.
Codice completo
<header>
<h1>Portfolio di Marco Rossi</h1>
<p>Sviluppatore front-end specializzato in interfacce accessibili e performanti.</p>
</header>
<main>
<section>
<h2>Chi sono</h2>
<p>Lavoro su siti web e applicazioni che devono essere facili da usare, semplici da aggiornare e ben strutturate.</p>
</section>
<section>
<h2>Progetti recenti</h2>
<p>Alcuni esempi di lavori recenti includono dashboard interne, landing page e siti vetrina per piccole aziende.</p>
<section>
<h3>Dashboard vendite</h3>
<p>Un pannello di controllo per monitorare ordini, fatturato e performance dei prodotti.</p>
</section>
<section>
<h3>Sito per studio medico</h3>
<p>Una struttura chiara per servizi, orari, contatti e prenotazioni online.</p>
</section>
</section>
<section>
<h2>Contatti</h2>
<p>Puoi scrivermi via email o trovare i miei profili professionali online.</p>
</section>
</main>
<footer>
<p>© 2026 Marco Rossi. Tutti i diritti riservati.</p>
</footer>Spiegazione
Vediamo come funziona la struttura e perché è utile in un progetto reale.
<header>
Il tag <header> rappresenta l’intestazione della pagina o di una sezione. Nel nostro esempio contiene il nome del portfolio e una breve descrizione. Questo è un buon uso perché il contenuto introduttivo è immediatamente riconoscibile.
Un vantaggio pratico è che l’header può essere aggiornato facilmente senza toccare il resto del contenuto. Se domani cambi titolo, slogan o immagine di presentazione, sai esattamente dove intervenire.
<main>
Il tag <main> racchiude il contenuto principale della pagina. È uno dei punti più importanti della struttura semantica perché identifica ciò che è davvero centrale per l’utente.
In una pagina ben progettata, main dovrebbe comparire una sola volta. Questo aiuta a distinguere il contenuto principale da elementi ricorrenti come header e footer. Nei progetti grandi, questa separazione è fondamentale per la manutenzione: il team sa subito dove si trova la parte “viva” della pagina.
<section>
Il tag <section> serve a raggruppare contenuti correlati. Nel nostro esempio divide la pagina in blocchi logici: chi sono, progetti recenti e contatti. Ogni sezione ha un titolo proprio, così la struttura è leggibile anche senza CSS.
Una buona regola pratica è usare <section> quando il contenuto ha un tema preciso e può essere descritto con un titolo. Se il blocco non ha un significato autonomo, forse è meglio usare un semplice contenitore neutro in altri contesti; qui però ci concentriamo sui tag semantici principali.
<footer>
Il tag <footer> contiene informazioni conclusive: copyright, contatti secondari, link legali o note finali. Nel nostro esempio ospita il classico avviso di copyright.
Dal punto di vista della manutenzione, il footer è utile perché raccoglie elementi che cambiano raramente e che spesso sono condivisi tra più pagine. In un sito multi-pagina, questo permette di standardizzare il blocco finale e aggiornarlo in modo uniforme.
Perché questa struttura è facile da mantenere
- Separazione chiara dei ruoli: intestazione, contenuto e chiusura sono distinti.
- Blocchi indipendenti: ogni sezione può essere aggiornata senza riscrivere tutta la pagina.
- Lettura più rapida del codice: anche un nuovo sviluppatore capisce subito la gerarchia.
- Riduzione degli errori: meno diventa ambigua la struttura, più è difficile rompere il layout durante modifiche future.
Best practice
- Usa un solo <main> per pagina: è una regola importante per mantenere chiaro il contenuto principale.
- Dai sempre un titolo alle sezioni: un <section> senza intestazione è spesso un segnale di struttura poco chiara.
- Non usare i tag semantici solo per lo stile: il loro compito è descrivere il significato, non sostituire i contenitori grafici.
- Organizza il contenuto in blocchi logici: pensa alla pagina come a una serie di aree con uno scopo preciso.
- Evita annidamenti inutili: troppe sezioni annidate senza motivo rendono il documento più difficile da leggere.
- Mantieni coerenza tra pagine diverse: se un sito ha più pagine, usa la stessa logica strutturale ovunque.
Un consiglio molto utile in progetti reali è questo: prima di scrivere il codice, prova a descrivere la pagina in linguaggio naturale. Per esempio: “intestazione, contenuto principale con tre sezioni, piè di pagina”. Se riesci a farlo con chiarezza, probabilmente la tua struttura HTML sarà ben progettata.
Riepilogo
I tag semantici <header>, <main>, <footer> e <section> sono strumenti fondamentali per costruire pagine ordinate, leggibili e facili da mantenere. Il loro valore non è solo teorico: in un progetto reale aiutano a separare i contenuti, semplificano gli aggiornamenti e rendono il codice più comprensibile per tutti.
In sintesi:
- <header> introduce la pagina o una sua area.
- <main> contiene il contenuto principale.
- <section> raggruppa contenuti correlati in blocchi con un significato preciso.
- <footer> chiude la pagina con informazioni finali o secondarie.
Se impari a usarli con coerenza, il tuo HTML sarà più professionale e più semplice da evolvere nel tempo.
Approfondisci con risorse ufficiali
- MDN Web Docs - <header>: documentazione chiara e completa sull’elemento di intestazione.
- MDN Web Docs - <main>: spiegazione dettagliata sull’area principale del documento.
- MDN Web Docs - <section>: guida all’uso corretto delle sezioni semantiche.
- MDN Web Docs - <footer>: riferimento ufficiale per il piè di pagina semantico.
- WHATWG HTML Living Standard: specifica ufficiale del linguaggio HTML.