Introduzione
Quando si realizza una pagina per un articolo tecnico, la struttura semantica non dovrebbe fermarsi al contenuto principale. Un post può includere informazioni sull’autore, dati di pubblicazione, collegamenti per la condivisione e una sezione di commenti. Usare correttamente <article>, <aside> e <nav> permette di descrivere il significato delle diverse parti della pagina, non soltanto il loro aspetto visivo.
In questo tutorial costruiremo una pagina di articolo con un caso pratico: un contenuto principale autonomo, un riquadro laterale con la biografia dell’autore, una navigazione dedicata alle azioni dell’articolo e una serie di commenti rappresentati come articoli annidati.
La distinzione è importante: un <article> contiene un contenuto che potrebbe essere distribuito o riutilizzato indipendentemente; un <aside> contiene informazioni complementari; un <nav> raccoglie collegamenti destinati alla navigazione.
Codice completo
<main>
<article aria-labelledby="titolo-articolo">
<header>
<p>Categoria: Sviluppo web</p>
<h1 id="titolo-articolo">Progettare componenti HTML riutilizzabili</h1>
<p>
Pubblicato il
<time datetime="2026-10-19">19 ottobre 2026</time>
da <a href="/autori/marta-rossi">Marta Rossi</a>
</p>
</header>
<p>
Una buona struttura HTML separa il contenuto principale dalle
informazioni di supporto e dalle azioni disponibili per il lettore.
</p>
<h2>Perché la semantica è importante</h2>
<p>
Gli elementi semantici aiutano browser, motori di ricerca e tecnologie
assistive a comprendere il ruolo di ogni blocco della pagina.
</p>
<aside aria-label="Informazioni sull´autrice">
<h2>L´autrice</h2>
<p>
Marta Rossi è una sviluppatrice frontend specializzata in HTML,
accessibilità e progettazione di interfacce.
</p>
<a href="/autori/marta-rossi">Leggi il profilo completo</a>
</aside>
<nav aria-label="Azioni sull´articolo">
<h2>Azioni</h2>
<ul>
<li><a href="#commenti">Vai ai commenti</a></li>
<li><a href="/stampa/componenti-html">Versione stampabile</a></li>
<li><a href="/feed/articoli">Segui il feed degli articoli</a></li>
</ul>
</nav>
<section id="commenti" aria-labelledby="titolo-commenti">
<h2 id="titolo-commenti">Commenti</h2>
<article>
<header>
<h3>Luca Bianchi</h3>
<p>
Pubblicato il
<time datetime="2026-10-19T10:30">
19 ottobre 2026, ore 10:30
</time>
</p>
</header>
<p>
La distinzione tra contenuto autonomo e contenuto complementare
è molto utile anche nei progetti di grandi dimensioni.
</p>
</article>
<article>
<header>
<h3>Sara Conti</h3>
<p>
Pubblicato il
<time datetime="2026-10-19T11:15">
19 ottobre 2026, ore 11:15
</time>
</p>
</header>
<p>
È utile associare un´etichetta aria-label ai diversi elementi
<code>nav</code> presenti nella stessa pagina.
</p>
</article>
</section>
</article>
</main>Spiegazione
L’articolo principale come contenuto autonomo
L’elemento <article> più esterno rappresenta il post completo. Il suo contenuto avrebbe senso anche se fosse mostrato in un feed, in una pagina di ricerca o in un sistema di syndication. L’attributo aria-labelledby collega l’articolo al titolo principale, rendendo più immediata l’identificazione del contenitore per chi utilizza una tecnologia assistiva.
All’interno dell’articolo sono presenti <header>, titolo, autore e data. L’elemento <time> mostra una data leggibile agli utenti e, tramite datetime, fornisce una rappresentazione standardizzata ai browser e agli strumenti automatici.
L’aside per la biografia
La biografia non è il tema principale del post. È un’informazione utile, ma rimovibile senza compromettere la comprensione dell’articolo: per questo è adatta a <aside>. Non bisogna usare <aside> soltanto perché un elemento viene visualizzato graficamente in una colonna laterale. La posizione visiva viene gestita dal CSS; la semantica dipende dal significato.
Una nav per le azioni
Un documento può contenere più elementi <nav>, purché ognuno rappresenti un insieme distinto di collegamenti di navigazione. In questo esempio la navigazione non è il menu principale del sito: contiene azioni specifiche dell’articolo. L’attributo aria-label evita ambiguità, soprattutto quando nella pagina esistono altre navigazioni.
I commenti come articoli annidati
Ogni commento possiede un autore, una data e un contenuto autonomo. Di conseguenza può essere modellato con un ulteriore <article> annidato nella sezione dei commenti. Questa scelta descrive bene la relazione tra il post e le sue risposte senza confondere i commenti con semplici paragrafi decorativi.
Best practice
- Scegli
<article>in base all’autonomia del contenuto: usalo per post, recensioni, commenti o schede che potrebbero essere riutilizzati separatamente. - Non abusare di
<aside>: una semplice decorazione, un contenitore per il layout o un elemento puramente grafico non sono necessariamente contenuti complementari. - Dai un nome alle navigazioni: quando esistono più elementi
<nav>, usaaria-labelcon valori descrittivi come “Azioni sull’articolo” o “Paginazione commenti”. - Mantieni una gerarchia di titoli coerente: il titolo del post può essere un
<h1>, mentre commenti e blocchi secondari possono usare<h2>e<h3>. - Non usare elementi semantici per ottenere uno stile: HTML descrive la struttura, mentre CSS gestisce colonne, colori, spaziature e disposizione visiva.
- Preferisci collegamenti reali: le azioni che portano a un’altra risorsa devono essere
<a>. Un pulsante è più adatto a un’azione eseguita direttamente nella pagina, come aprire una finestra o inviare un modulo. - Verifica la struttura con strumenti accessibili: controlla l’albero di accessibilità del browser e prova la navigazione usando soltanto tastiera e lettore di schermo.
Riepilogo
Una pagina editoriale ben progettata può usare più elementi semantici con ruoli distinti. L’<article> principale identifica il contenuto indipendente, l’<aside> raccoglie informazioni di supporto e il <nav> organizza collegamenti dedicati a una funzione di navigazione. Anche i commenti possono essere articoli annidati quando rappresentano contenuti autonomi.
La regola più importante è chiedersi sempre quale sia il significato di un blocco, invece di scegliere un elemento in base alla sua posizione o al suo aspetto grafico.