Introduzione
Un caso pratico in cui i tag semantici risultano particolarmente utili è la realizzazione di una pagina dedicata a un evento: una conferenza, un corso online, un workshop o una presentazione aziendale. In questo tipo di pagina il contenuto deve essere organizzato in modo chiaro, perché l’utente deve individuare rapidamente il titolo dell’evento, il programma, le informazioni principali e i contatti.
I tag header, main, section e footer permettono di descrivere il ruolo delle diverse aree della pagina, non soltanto il loro aspetto grafico. In questo modo il codice diventa più comprensibile per chi lo sviluppa, più interpretabile dai motori di ricerca e più semplice da utilizzare con tecnologie assistive.
In questo tutorial costruiremo una pagina HTML per un workshop dedicato allo sviluppo web. L’obiettivo non è soltanto ottenere una struttura ordinata, ma imparare a raggruppare correttamente i contenuti in base al loro significato.
Codice completo
<header>
<h1>WebLab 2026</h1>
<p>Workshop pratico di sviluppo web moderno</p>
</header>
<main>
<section>
<h2>Informazioni sull’evento</h2>
<p>
Una giornata dedicata a HTML, CSS e JavaScript, con lezioni
pratiche e attività guidate.
</p>
<ul>
<li><strong>Data:</strong> 18 giugno 2026</li>
<li><strong>Orario:</strong> 09:00 - 17:30</li>
<li><strong>Luogo:</strong> Centro Tecnologie Digitali, Milano</li>
</ul>
</section>
<section>
<h2>Programma della giornata</h2>
<h3>Mattina: basi solide</h3>
<ul>
<li>09:00 - Registrazione dei partecipanti</li>
<li>09:30 - Struttura semantica di una pagina HTML</li>
<li>11:00 - Pausa</li>
<li>11:15 - Esercitazione guidata</li>
</ul>
<h3>Pomeriggio: laboratorio pratico</h3>
<ul>
<li>14:00 - Organizzazione dei contenuti</li>
<li>15:30 - Creazione di una pagina responsive</li>
<li>17:00 - Domande e revisione dei progetti</li>
</ul>
</section>
<section>
<h2>Come partecipare</h2>
<p>
La partecipazione è gratuita, ma i posti disponibili sono limitati.
Per ricevere conferma, invia la richiesta all’indirizzo
[email protected].
</p>
</section>
</main>
<footer>
<p>© 2026 WebLab. Tutti i diritti riservati.</p>
<p>Contatto organizzativo: [email protected]</p>
</footer>Spiegazione
Il tag header contiene l’introduzione della pagina o di una specifica area di contenuto. Nell’esempio presenta il nome dell’evento e una breve descrizione. In una pagina più complessa, un header potrebbe includere anche un logo, una navigazione o informazioni introduttive aggiuntive.
Il tag main racchiude il contenuto principale e unico della pagina. È importante utilizzarlo una sola volta all’interno del documento. In questo esempio tutte le informazioni direttamente collegate al workshop si trovano dentro main, mentre l’intestazione generale e il piè di pagina restano esterni.
Le tre aree informative sono delimitate da altrettanti tag section. Una sezione dovrebbe rappresentare un argomento autonomo e avere normalmente un titolo. Per questo ogni section contiene un elemento h2: il titolo permette di capire immediatamente quale tema viene trattato.
La seconda sezione include anche due elementi h3. Questi titoli descrivono due sottoargomenti della sezione principale, cioè il programma della mattina e quello del pomeriggio. La gerarchia è quindi coerente: h1 identifica la pagina, h2 identifica le sezioni principali e h3 identifica i relativi sottoargomenti.
Il tag footer contiene informazioni complementari, come il copyright e un contatto organizzativo. Il piè di pagina non deve contenere necessariamente soltanto il copyright: può includere anche riferimenti legali, informazioni sull’autore o dati utili per contattare l’organizzazione.
Gli elementi ul e li sono stati utilizzati per rappresentare elenchi di informazioni. Questa scelta è preferibile rispetto all’inserimento di molti paragrafi separati, perché comunica chiaramente che gli elementi appartengono a una lista.
Best practice
- Usa un solo main per pagina e inserisci al suo interno il contenuto principale.
- Assegna a ogni section un titolo descrittivo, generalmente tramite h2.
- Non scegliere i tag semantici soltanto in base all’aspetto grafico: il loro scopo principale è descrivere il significato del contenuto.
- Mantieni una gerarchia corretta dei titoli. Dopo un h2 puoi usare un h3 per una sua sottoarea, evitando di saltare arbitrariamente i livelli.
- Utilizza header e footer per contenuti introduttivi e conclusivi, non come semplici contenitori generici.
- Dividi una pagina in più section solo quando ogni area rappresenta un argomento riconoscibile. Se devi raggruppare elementi esclusivamente per applicare uno stile, un contenitore generico sarebbe più adatto.
- Scrivi titoli specifici: “Programma della giornata” è più utile di un titolo generico come “Dettagli”.
- Controlla la struttura con strumenti di validazione HTML e prova la pagina usando una tecnologia assistiva, quando possibile.
Riepilogo
Per una pagina dedicata a un evento, i tag semantici permettono di separare chiaramente l’introduzione, il contenuto centrale, le singole aree tematiche e le informazioni finali. Header presenta la pagina, main identifica il contenuto principale, section raggruppa argomenti correlati e footer conclude il documento con informazioni complementari.
Una struttura semantica corretta rende il codice più leggibile e facilita future modifiche. Inoltre, una gerarchia coerente di titoli e sezioni aiuta utenti, browser, motori di ricerca e strumenti assistivi a interpretare meglio la pagina.
Approfondisci con risorse ufficiali
- MDN Web Docs: consulta la documentazione sugli elementi HTML semantici e sulle loro modalità d’uso.
- WHATWG HTML Living Standard: approfondisci la definizione ufficiale di header, main, section e footer.
- W3C Web Accessibility Initiative: studia le raccomandazioni per creare strutture comprensibili e accessibili.
- HTML Validator: verifica la validità sintattica del codice e individua eventuali errori nella struttura del documento.