I tag semantici HTML5 hanno trasformato il modo in cui strutturiamo le pagine web. Prima della loro introduzione, l’unico modo per definire le sezioni di una pagina era utilizzare <div> con classi CSS convenzionali. Oggi disponiamo di elementi dedicati che comunicano chiaramente il ruolo di ogni area della pagina. In questo articolo analizzeremo in profondità ogni tag semantico, con esempi pratici di utilizzo e un layout completo di pagina.
Header e Footer: Intestazione e Piè di Pagina
Il tag <header> rappresenta il contenuto introduttivo di una pagina o di una sezione. Nella maggior parte dei siti web, l’header principale contiene il logo, il menu di navigazione, eventualmente una barra di ricerca e altri elementi di identità del brand. Ma il tag <header> non è limitato all’intestazione della pagina: può essere usato anche all’interno di un <article> o una <section> per introdurre quella specifica sezione.
Allo stesso modo, il tag <footer> rappresenta il contenuto conclusivo. Il footer principale della pagina tipicamente contiene informazioni di copyright, link ai social media, contatti, link alla privacy policy e alla sitemap. Come l’header, il footer può essere usato anche all’interno di article e section per informazioni conclusive di quella sezione, come l’autore di un articolo, la data di pubblicazione o i tag associati.
Una pagina può contenere più tag <header> e <footer> (uno per ogni sezione che lo necessita), ma generalmente un solo header e un solo footer sono al livello superiore del body. Non devono essere annidati: un <header> non può contenere un altro <header>, e lo stesso vale per il <footer>.
Nav: La Navigazione del Sito
Il tag <nav> identifica una sezione di navigazione, ovvero un insieme di link che permettono all’utente di spostarsi tra le pagine del sito o all’interno della pagina corrente. Non tutti i gruppi di link devono essere racchiusi in un <nav>: questo tag è riservato ai blocchi di navigazione principali, come il menu principale, la navigazione nel footer o un indice dei contenuti.
La struttura tipica di un <nav> utilizza una lista non ordinata per i link:
<nav aria-label="Navigazione principale">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/servizi">Servizi</a></li>
<li><a href="/chi-siamo">Chi Siamo</a></li>
<li><a href="/contatti">Contatti</a></li>
</ul>
</nav>Quando una pagina contiene più elementi <nav> (ad esempio, navigazione principale e navigazione nel footer), è buona pratica differenziarli con l’attributo aria-label per aiutare gli utenti di screen reader a distinguerli. Ad esempio: aria-label="Navigazione principale" e aria-label="Navigazione principale".
Main: Il Contenuto Principale
Il tag <main> identifica il contenuto principale della pagina, quello unico e specifico di quella pagina. Esclude elementi ripetuti su più pagine come header, footer, navigazione e sidebar. Ogni pagina dovrebbe avere un solo elemento <main>, e questo non deve essere annidato all’interno di <article>, <aside>, <footer>, <header> o <nav>.
L’importanza del tag <main> per l’accessibilità è enorme. Gli screen reader offrono una scorciatoia per saltare direttamente al contenuto principale, bypassando header e navigazione. Senza il tag <main>, gli utenti con disabilità visive devono navigare attraverso ogni elemento della pagina per raggiungere il contenuto che cercano, un’esperienza frustrante che può richiedere molti secondi o minuti.
Per il SEO, il tag <main> aiuta i motori di ricerca a identificare rapidamente quale porzione della pagina contiene il contenuto editoriale rilevante, distinguendolo dagli elementi di interfaccia. Google ha confermato di utilizzare questa informazione per migliorare la comprensione del contenuto.
Section e Article: Sezioni e Contenuti Indipendenti
I tag <section> e <article> sono probabilmente i più confusi tra i tag semantici, ma la distinzione è importante.
Il tag <section> rappresenta una sezione tematica di contenuto, ovvero un raggruppamento logico di contenuti correlati. Ogni section dovrebbe idealmente avere un heading che ne definisce il tema. Ad esempio, una homepage potrebbe avere una section per i servizi, una per le testimonianze e una per i contatti. Il criterio chiave: una section ha senso solo nel contesto del documento che la contiene.
Il tag <article> rappresenta un contenuto autosufficiente e indipendente che avrebbe senso anche se estratto dal contesto della pagina. Un post di blog, un commento, un articolo di giornale, una scheda prodotto o un widget autonomo sono tutti esempi appropriati di <article>. Il criterio chiave: un article potrebbe essere ripubblicato altrove (in un feed RSS, in un’altra pagina) mantenendo il suo significato completo.
I due tag possono essere annidati: un article può contenere più section (ad esempio, le sezioni di un lungo articolo), e una section può contenere più article (ad esempio, una sezione “Articoli recenti” con più post).
Aside, Figure, Time e Address
Il tag <aside> identifica contenuto tangenzialmente correlato al contenuto principale. In una pagina di blog, l’aside può contenere la sidebar con categorie, tag cloud e articoli correlati. All’interno di un article, può contenere una nota, un’informazione aggiuntiva o un box di approfondimento. Il contenuto di un aside potrebbe essere rimosso senza che il contenuto principale perda significato.
Il tag <figure> racchiude un contenuto autosufficiente come un’immagine, un diagramma, un grafico o un blocco di codice, opzionalmente accompagnato da una didascalia <figcaption>. La posizione di un figure nel flusso del documento non è essenziale: potrebbe essere spostato in un’appendice senza alterare il flusso del testo principale.
Il tag <time> rappresenta una data o un orario in formato leggibile dall’uomo, con l’attributo datetime che fornisce il valore in formato machine-readable (ISO 8601). Ad esempio: <time datetime="2024-10-31">31 ottobre 2024</time>. I motori di ricerca e i feed reader utilizzano questo dato per ordinare cronologicamente i contenuti.
Il tag <address> indica le informazioni di contatto per l’autore o il proprietario del documento o dell’articolo più vicino. Può contenere email, indirizzi fisici, numeri di telefono e link ai profili social. Non è destinato a contenere indirizzi generici citati nel testo (come l’indirizzo di un luogo descritto in un articolo).
Esempio di Layout Completo con Tag Semantici
Ecco come si presenta una pagina web completa strutturata con tutti i tag semantici HTML5:
<header>
<a href="/"><img src="logo.svg" alt="Nome Azienda"></a>
<nav aria-label="Navigazione principale">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/contatti">Contatti</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h1>Titolo dell'Articolo</h1>
<time datetime="2024-10-31">31 Ottobre 2024</time>
</header>
<section>
<h2>Prima Sezione</h2>
<p>Contenuto della sezione...</p>
</section>
<footer>
<address>Scritto da <a href="mailto:au****@***il.com" data-original-string="kqUoqjlweKYvekviEYMgSQ==7f5ipbHSJV0MFucNwagTratnPkRJc5mN4+iT9i0qa5FKpU=" title="This contact has been encoded by Anti-Spam by CleanTalk. Click to decode. To finish the decoding make sure that JavaScript is enabled in your browser.">Nome Autore</a></address>
</footer>
</article>
<aside>
<h2>Articoli Correlati</h2>
<ul>...</ul>
</aside>
</main>
<footer>
<p>© 2024 Nome Azienda</p>
<nav aria-label="Navigazione principale">...</nav>
</footer>Questa struttura è chiara, accessibile, SEO-friendly e facile da mantenere. Ogni sezione ha un significato esplicito che browser, motori di ricerca e tecnologie assistive possono interpretare correttamente. Per approfondire il concetto di semantica e i suoi benefici, consulta il nostro articolo sull’HTML semantico per SEO e accessibilità.
Hai bisogno di aiuto con la struttura semantica del tuo sito web? G Tech Group offre servizi di sviluppo web professionale e consulenza tecnica. Contattaci a su*****@********up.it o via WhatsApp al 0465 84 62 45.