Introduzione
Quando si costruisce un blog in HTML, non basta “mettere contenuti dentro dei div”. Una buona struttura semantica aiuta il browser, i motori di ricerca e i lettori di schermo a capire quale parte della pagina è l’articolo principale, quale parte contiene contenuti correlati e quale area serve per la navigazione.
In questo tutorial vediamo un sotto-argomento molto pratico: come organizzare la pagina di un blog con un articolo principale, una sidebar e un menu di navigazione interno. Useremo in modo corretto i tag <article>, <aside> e <nav>, così da ottenere una struttura chiara, riutilizzabile e accessibile.
Questo approccio è utile sia per una homepage con lista di post, sia per una pagina dettaglio articolo. Ti mostrerò un esempio completo e poi lo analizzeremo pezzo per pezzo.
Codice completo
<nav aria-label="Navigazione principale del blog">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="/chi-siamo/">Chi siamo</a></li>
<li><a href="/contatti/">Contatti</a></li>
</ul>
</nav>
<main>
<article>
<header>
<h1>Come scrivere post tecnici più leggibili</h1>
<p>Pubblicato il 21 aprile 2026 da Marta Rossi</p>
</header>
<p>
Un post tecnico ben scritto non deve solo essere corretto: deve anche essere
facile da leggere, scansionare e aggiornare nel tempo.
</p>
<h2>1. Dividi il contenuto in blocchi logici</h2>
<p>
Usa paragrafi brevi, titoli chiari e liste quando devi presentare passaggi o
concetti in sequenza.
</p>
<h2>2. Evidenzia i punti importanti</h2>
<p>
Le informazioni chiave vanno messe in risalto con <strong>testo in grassetto</strong>
solo quando serve davvero.
</p>
<footer>
<p>Tag: HTML, accessibilità, blogging</p>
</footer>
</article>
<aside aria-label="Contenuti correlati">
<h2>Articoli correlati</h2>
<ul>
<li><a href="/blog/seo-base/">SEO base per blog tecnici</a></li>
<li><a href="/blog/accessibilita/">Accessibilità HTML: le basi</a></li>
<li><a href="/blog/markdown-vs-html/">Markdown o HTML per i post?</a></li>
</ul>
<h3>Newsletter</h3>
<p>Ricevi una guida settimanale con esempi pratici e consigli di sviluppo.</p>
</aside>
</main>Spiegazione
Partiamo dal tag <nav>. Questo elemento serve a racchiudere un blocco di navigazione importante, come il menu principale del sito. Nel nostro esempio contiene i link fondamentali del blog: Home, Blog, Chi siamo e Contatti. L’attributo aria-label è utile quando nella pagina ci sono più aree di navigazione: aiuta le tecnologie assistive a distinguere questo menu dagli altri.
All’interno della pagina principale abbiamo usato <main> per indicare il contenuto centrale. Anche se il focus di questo tutorial è su <article>, <aside> e <nav>, è importante vedere il loro contesto corretto. <main> contiene il contenuto unico della pagina, evitando ambiguità.
Il tag <article> racchiude un contenuto autonomo: in questo caso un post del blog. È la scelta giusta quando il blocco può vivere da solo, essere condiviso, salvato o riutilizzato in un feed. Dentro <article> abbiamo inserito un <header> con titolo e metadati, poi il testo del post e infine un <footer> con i tag o altre informazioni di chiusura.
Il tag <aside> è perfetto per i contenuti secondari o correlati al contenuto principale. Nel nostro esempio contiene una lista di articoli suggeriti e una piccola box newsletter. Questi elementi sono utili, ma non sono il cuore della pagina: per questo vanno separati semanticamente dal post principale.
Un dettaglio importante: in <aside> abbiamo usato anche un titolo <h2>. Questo rende chiara la funzione del blocco. Se la sidebar contiene più sezioni, puoi usare anche <h3> per i sottotitoli, mantenendo una gerarchia ordinata.
In pratica, la struttura comunica così:
- <nav> = spostarsi nel sito;
- <article> = leggere il contenuto principale;
- <aside> = esplorare contenuti extra o correlati.
Questa separazione semantica è molto utile anche per la manutenzione: quando il progetto cresce, il codice resta leggibile e ogni area ha un significato preciso.
Best practice
- Usa <nav> solo per navigazioni importanti: non inserirlo per ogni lista di link. Se il blocco non serve a navigare il sito, probabilmente non è un nav.
- Rendi <article> autonomo: il contenuto deve avere senso anche fuori dal contesto della pagina, ad esempio in una pagina archivio o in un feed RSS.
- Non abusare di <aside>: usalo per informazioni secondarie, non per parti essenziali del contenuto.
- Mantieni una gerarchia di titoli coerente: un solo
<h1>per il contenuto principale dell’articolo, poi<h2>e<h3>in ordine logico. - Aggiungi etichette accessibili quando ci sono più aree simili, ad esempio con
aria-labelsu<nav>e<aside>. - Evita i div inutili: se un elemento semantico descrive bene il contenuto, è preferibile a un contenitore generico.
- Non mettere contenuti principali dentro aside: se una sezione è davvero centrale per il post, deve stare nell’articolo, non nella sidebar.
Riepilogo
Per costruire un blog ben strutturato, <article>, <aside> e <nav> sono tre elementi fondamentali ma con ruoli diversi.
- <article> identifica il contenuto principale e autonomo, come un post.
- <aside> raccoglie contenuti secondari, come link correlati, box promozionali o approfondimenti.
- <nav> contiene i collegamenti di navigazione più importanti del sito o della sezione.
Se usati correttamente, questi tag migliorano la leggibilità del codice, l’accessibilità e la qualità complessiva della pagina. Per un blog professionale, questa è una base solida da cui partire.
Approfondisci con risorse ufficiali
- MDN Web Docs - <article>: documentazione completa sull’uso semantico degli articoli.
- MDN Web Docs - <aside>: spiegazione dettagliata dei contenuti laterali e correlati.
- MDN Web Docs - <nav>: guida all’uso corretto dei blocchi di navigazione.
- WHATWG HTML Living Standard: specifica ufficiale del linguaggio HTML.
- W3C WAI: risorse utili per creare contenuti web più accessibili.