Introduzione
Una pagina di blog non contiene soltanto il testo principale. Spesso include un percorso di navigazione, un indice degli argomenti, collegamenti ad altri articoli e informazioni aggiuntive. Organizzare questi contenuti con elementi semantici HTML aiuta i browser, i motori di ricerca e le tecnologie assistive a comprendere il ruolo di ogni area.
In questo tutorial realizzeremo la struttura di una pagina dedicata a un articolo tecnico. Useremo <article> per rappresentare un contenuto autonomo, <nav> per gruppi di collegamenti di navigazione e <aside> per informazioni complementari al contenuto principale.
L’obiettivo non è soltanto ottenere una pagina visivamente ordinata, ma creare una struttura robusta anche quando il CSS viene modificato o disattivato. Un lettore dovrebbe poter distinguere l’articolo, raggiungere rapidamente le sezioni e trovare risorse correlate senza confondere questi elementi con il contenuto principale.
Codice completo
<main>
<nav aria-label="Percorso di navigazione">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/html">HTML</a></li>
<li aria-current="page">Elementi semantici</li>
</ol>
</nav>
<article>
<header>
<p>Categoria: HTML</p>
<h1>Come usare gli elementi semantici nelle pagine web</h1>
<p>Pubblicato il
<time datetime="2026-09-11">11 settembre 2026</time>
</p>
</header>
<nav aria-label="Indice dell´articolo">
<h2>In questa guida</h2>
<ul>
<li><a href="#article">Il ruolo di article</a></li>
<li><a href="#aside">Quando usare aside</a></li>
<li><a href="#nav">Come distinguere i menu nav</a></li>
</ul>
</nav>
<section id="article">
<h2>Il ruolo di article</h2>
<p>L´elemento article contiene una porzione di contenuto
autonoma e potenzialmente riutilizzabile.</p>
</section>
<section id="aside">
<h2>Quando usare aside</h2>
<p>Aside raccoglie informazioni collegate, ma non indispensabili
per comprendere il testo principale.</p>
</section>
<section id="nav">
<h2>Come distinguere i menu nav</h2>
<p>Ogni nav dovrebbe descrivere un gruppo importante di
collegamenti, usando un´etichetta appropriata.</p>
</section>
<footer>
<p>Autore: Giulia Bianchi</p>
</footer>
</article>
<aside aria-labelledby="related-title">
<h2 id="related-title">Potrebbe interessarti</h2>
<ul>
<li><a href="/html/headings">Gerarchia corretta dei titoli HTML</a></li>
<li><a href="/html/landmarks">Landmark e accessibilità</a></li>
</ul>
</aside>
</main>Spiegazione
Un articolo autonomo
<article> identifica un contenuto che potrebbe essere distribuito o riutilizzato anche separatamente dalla pagina. Un post, una recensione, una notizia o una scheda tecnica sono esempi adatti. All’interno dell’articolo possiamo inserire un’intestazione con titolo, categoria, autore e data, il contenuto suddiviso in sezioni e un piè di pagina con informazioni finali.
La presenza di un <header> e di un <footer> interni non è obbligatoria, ma migliora l’organizzazione logica. Il tag <time>, inoltre, permette di rappresentare la data in un formato leggibile dalle macchine tramite l’attributo datetime.
Due nav con scopi diversi
Nel codice sono presenti due elementi <nav>. Il primo contiene il breadcrumb, cioè il percorso che indica la posizione dell’utente nel sito. Il secondo contiene l’indice interno dell’articolo. Entrambi rappresentano navigazioni importanti, ma hanno scopi differenti.
L’attributo aria-label evita ambiguità per chi utilizza uno screen reader. Senza un’etichetta, due aree di navigazione potrebbero risultare difficili da distinguere. L’attributo aria-current="page" segnala invece l’elemento corrispondente alla pagina attiva.
Contenuti complementari con aside
<aside> è adatto a collegamenti correlati, citazioni, definizioni, profili dell’autore o brevi approfondimenti. Il suo contenuto non dovrebbe essere indispensabile per seguire il filo dell’articolo. Se rimuovendo l’aside il testo principale perde informazioni essenziali, probabilmente quel contenuto appartiene a una sezione dell’articolo.
L’attributo aria-labelledby collega l’aside al proprio titolo. In questo modo il nome dell’area viene ricavato dall’elemento <h2> con identificatore related-title.
Best practice
- Usa article per contenuti indipendenti: non applicarlo automaticamente a ogni contenitore visivo.
- Dai un nome alle navigazioni: impiega aria-label quando nella stessa pagina esistono più elementi <nav>.
- Mantieni il breadcrumb coerente: l’ultimo elemento dovrebbe rappresentare la pagina corrente e non essere necessariamente un collegamento.
- Collega l’indice a titoli reali: ogni valore di href deve corrispondere a un attributo id univoco.
- Non abusare di aside: una pubblicità o un blocco puramente decorativo non diventa automaticamente contenuto complementare.
- Rispetta la gerarchia dei titoli: dopo un <h1> principale, usa <h2> per le sezioni e <h3> per eventuali sotto-sezioni.
- Scrivi collegamenti descrittivi: “Gerarchia corretta dei titoli HTML” è più utile di un generico “Clicca qui”.
Riepilogo
Una pagina di articolo ben progettata può contenere più aree semantiche con responsabilità distinte. <article> racchiude il contenuto autonomo, <nav> identifica i gruppi principali di collegamenti e <aside> ospita informazioni correlate ma non essenziali.
L’uso di etichette accessibili, identificatori coerenti e una gerarchia corretta dei titoli rende la pagina più comprensibile sia alle persone sia agli strumenti automatici. La semantica non sostituisce il CSS, ma fornisce una base strutturale solida su cui costruire il layout.