Introduzione
I tag semantici principali di HTML, come <header>, <main>, <footer> e <section>, non servono solo a “dare ordine” al codice: aiutano a descrivere il significato del contenuto. Questo rende la pagina più comprensibile per chi legge il markup, per i motori di ricerca e per le tecnologie assistive.
In questo tutorial vedremo un sotto-argomento molto pratico: come usare i tag semantici per organizzare una landing page con più blocchi di contenuto indipendenti. È un caso reale, utile per siti aziendali, pagine prodotto, portfolio o presentazioni di servizi. L’obiettivo è capire quando usare <header>, <main>, <footer> e soprattutto <section> in modo corretto, evitando div inutili e strutture confuse.
Molti sviluppatori iniziano creando layout con soli <div>. Funziona, ma col tempo il codice diventa più difficile da leggere e mantenere. Con i tag semantici, invece, la struttura della pagina comunica già la sua funzione. Questo è un vantaggio concreto quando il progetto cresce, quando collaborano più persone o quando si deve intervenire rapidamente su una parte specifica della pagina.
Codice completo
Ecco un esempio completo di landing page semplice ma ben strutturata, con sezioni dedicate a presentazione, servizi, testimonianze e contatti.
<header>
<h1>Studio Aurora</h1>
<p>Soluzioni web moderne per piccole imprese e professionisti.</p>
</header>
<main>
<section>
<h2>Chi siamo</h2>
<p>
Studio Aurora progetta siti web essenziali, veloci e facili da aggiornare.
Lavoriamo con attenzione alla chiarezza del contenuto e alla qualità del codice.
</p>
</section>
<section>
<h2>Servizi principali</h2>
<ul>
<li><strong>Siti vetrina</strong> per presentare attività e contatti</li>
<li><strong>Landing page</strong> per campagne e promozioni</li>
<li><strong>Restyling HTML</strong> per migliorare struttura e manutenzione</li>
</ul>
</section>
<section>
<h2>Cosa dicono i clienti</h2>
<p>
“Il nuovo sito è più chiaro da navigare e più semplice da aggiornare.”
</p>
<p>
“La struttura semantica ha reso il progetto molto più ordinato.”
</p>
</section>
<section>
<h2>Contattaci</h2>
<p>
Scrivici per discutere il tuo progetto e valutare la soluzione più adatta.
</p>
<p>
Email: [email protected]
</p>
</section>
</main>
<footer>
<p>© 2026 Studio Aurora. Tutti i diritti riservati.</p>
</footer>Spiegazione
Vediamo il ruolo di ogni elemento nel codice.
<header>
Il tag <header> introduce il contenuto principale della pagina o di una sua sezione. In questo esempio contiene il nome del brand e una breve descrizione. Non è obbligatorio inserirvi un menu di navigazione: il suo compito è rappresentare l’intestazione del contenuto.
<main>
Il tag <main> racchiude il contenuto centrale e unico della pagina. Deve comparire una sola volta per documento. È il punto più importante della struttura, perché contiene ciò che l’utente cerca davvero: presentazione, servizi, testimonianze e contatti. Tutto ciò che non è ripetitivo o puramente introduttivo dovrebbe stare qui.
<section>
Il tag <section> serve a raggruppare contenuti tematicamente correlati. Ogni sezione del nostro esempio ha un titolo con <h2>, così il contenuto è leggibile sia per le persone sia per gli strumenti automatici. Una buona regola pratica è questa: usa <section> quando il blocco ha un significato autonomo e può essere descritto con un titolo chiaro.
Per esempio, “Servizi principali” e “Cosa dicono i clienti” sono due aree distinte. Separarle in sezioni diverse rende il documento più ordinato e facilita eventuali modifiche future.
<footer>
Il tag <footer> chiude la pagina con informazioni finali, come copyright, contatti secondari, link legali o riferimenti aziendali. Anche qui il significato è importante: il footer non è solo “la parte in fondo”, ma la zona destinata alle informazioni conclusive o complementari.
Perché questo approccio è utile
- Rende il codice più facile da leggere, anche dopo mesi.
- Aiuta a separare i contenuti per argomento.
- Riduce l’uso eccessivo di <div> senza significato.
- Favorisce una manutenzione più rapida quando il sito cresce.
- Costruisce una base migliore per accessibilità, SEO e integrazione con CSS.
Best practice
Per usare correttamente questi tag semantici, conviene seguire alcune regole semplici ma importanti.
- Usa un solo <main> per pagina. Deve contenere il contenuto principale, non elementi ripetuti come header o footer globali.
- Dai sempre un titolo alle <section>. Una sezione senza titolo è spesso un segnale che forse il tag giusto è un altro contenitore.
- Non usare <section> solo per creare spazio. Se il blocco non rappresenta un’unità tematica, meglio un elemento più adatto.
- Evita di annidare sezioni in modo casuale. La struttura deve riflettere la gerarchia del contenuto, non il solo design visivo.
- Usa <header> e <footer> anche dentro una sezione quando hanno senso locale, per esempio per introdurre o chiudere un articolo o un blocco specifico.
- Mantieni coerenza nei livelli dei titoli. Se una sezione ha un <h2>, i sottoblocchi interni possono usare <h3> solo se esiste una reale gerarchia.
Un errore comune è confondere la semantica con il layout. Il fatto che un elemento appaia in alto, al centro o in basso non basta per scegliere il tag. La scelta deve dipendere dal significato del contenuto. Il CSS si occuperà dell’aspetto; HTML deve descrivere la struttura.
Un altro consiglio pratico: quando inizi un nuovo progetto, prova a scrivere prima la mappa dei contenuti in forma di titoli. Se riesci a dividere la pagina in blocchi chiari, allora <section> sarà probabilmente la scelta giusta per ciascuno di essi.
Riepilogo
I tag semantici <header>, <main>, <footer> e <section> sono fondamentali per costruire pagine HTML più ordinate e professionali. Nel caso di una landing page o di una pagina informativa, permettono di separare chiaramente introduzione, contenuto centrale e chiusura, migliorando la leggibilità del markup.
Il punto chiave è questo: ogni tag deve rappresentare un significato, non solo una posizione visiva. Se usati bene, questi elementi rendono il progetto più semplice da gestire, più stabile nel tempo e più facile da estendere.
Approfondisci con risorse ufficiali
- MDN Web Docs - <header>: documentazione dettagliata sull’elemento di intestazione.
- MDN Web Docs - <main>: spiegazione dell’area contenente il contenuto principale.
- MDN Web Docs - <footer>: utilizzi corretti del piè di pagina semantico.
- MDN Web Docs - <section>: guida all’uso dei raggruppamenti tematici.
- WHATWG HTML Living Standard: specifica ufficiale del linguaggio HTML.
Se vuoi, nel prossimo passo posso anche mostrarti la differenza pratica tra <section>, <article> e <div> con esempi concreti e casi d’uso reali.