Organizzare un blog con <article>, <aside> e <nav> in modo efficace

Introduzione

Quando si costruisce un blog in HTML, non basta “mettere dentro” testo e immagini: è importante dare una struttura chiara ai contenuti. I tag semantici come <article>, <aside> e <nav> aiutano il browser, i motori di ricerca e le tecnologie assistive a capire meglio il ruolo di ogni sezione della pagina.

In un blog reale, questi elementi non servono solo a migliorare la leggibilità del codice: rendono più semplice separare il contenuto principale dagli elementi secondari, come la barra di navigazione, i suggerimenti di lettura, gli articoli correlati o le informazioni sull’autore. Questo approccio è molto utile quando il sito cresce e diventa più complesso.

In questo tutorial vedremo un sotto-argomento pratico spesso trascurato: come usare questi tre elementi per costruire una pagina articolo con navigazione interna e contenuti di supporto. È una situazione comune nei blog tecnici, nei magazine online e nei siti di notizie.

Codice completo

<nav aria-label="Navigazione principale">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/tutorial">Tutorial</a></li>
    <li><a href="/contatti">Contatti</a></li>
  </ul>
</nav>

<article>
  <header>
    <h1>Come scrivere un post tecnico ben strutturato</h1>
    <p>Pubblicato il 6 agosto 2026 da Marco Rossi</p>
  </header>

  <p>
    In un blog tecnico è fondamentale separare il contenuto principale dagli
    elementi di supporto. L´elemento <strong>article</strong> rappresenta
    un contenuto autonomo, come un post, una notizia o una scheda prodotto.
  </p>

  <h2>Perché la semantica migliora il blog</h2>
  <p>
    Una struttura semantica aiuta a mantenere il codice più chiaro e facilita
    la manutenzione. Inoltre, rende il contenuto più comprensibile per i motori
    di ricerca e per gli screen reader.
  </p>

  <h2>Esempio di organizzazione</h2>
  <p>
    Un articolo può contenere paragrafi, immagini, elenchi e sottosezioni.
    Ogni parte deve avere un ruolo preciso, senza mescolare navigazione e testo.
  </p>

  <footer>
    <p>Categoria: HTML, Accessibilità, Web Design</p>
  </footer>
</article>

<aside>
  <h2>Articoli correlati</h2>
  <ul>
    <li><a href="/blog/html-semantico">HTML semantico: guida pratica</a></li>
    <li><a href="/blog/accessibilita-base">Accessibilità web per principianti</a></li>
    <li><a href="/blog/struttura-pagina">Come progettare una pagina leggibile</a></li>
  </ul>

  <h2>Nota dell´autore</h2>
  <p>
    Se stai creando un blog con più contenuti, usa <strong>aside</strong> per
    informazioni secondarie, non indispensabili alla comprensione del post.
  </p>
</aside>

Spiegazione

Vediamo ora il ruolo dei tre elementi principali usati nell’esempio.

<article>: il contenuto autonomo

L’elemento <article> racchiude il contenuto principale del post. È ideale per elementi che hanno senso anche fuori dal contesto della pagina, come:

• un articolo di blog;
• una notizia;
• una recensione;
• un commento indipendente;
• una scheda informativa completa.

Nel nostro esempio, l’articolo contiene titolo, data, autore, testo e footer con le categorie. Questa è una struttura molto comune nei blog professionali.

<nav>: la navigazione principale

L’elemento <nav> serve per raggruppare i link di navigazione più importanti. Non va usato per ogni singolo gruppo di link, ma solo per i menu principali o per navigazioni rilevanti, come:

• menu del sito;
• indice di un lungo articolo;
• paginazione;
• link rapidi alle sezioni fondamentali.

Nel codice abbiamo aggiunto aria-label="Navigazione principale" per rendere il menu più chiaro agli screen reader. È una buona pratica quando ci sono più aree di navigazione nella stessa pagina.

<aside>: contenuto secondario ma utile

L’elemento <aside> è pensato per contenuti correlati ma non essenziali. In un blog può ospitare:

• articoli correlati;
• biografia dell’autore;
• tag del post;
• promozioni o newsletter;
• note laterali e approfondimenti.

Nel nostro esempio, l’aside contiene una lista di articoli correlati e una breve nota. Questo aiuta il lettore a scoprire altri contenuti senza interrompere la lettura del post principale.

Perché questa combinazione funziona bene

Separare chiaramente contenuto principale, navigazione e supporti laterali migliora sia l’esperienza utente sia la manutenzione del progetto. Quando il codice è semantico:

• è più facile da leggere e aggiornare;
• si individua subito la struttura della pagina;
• si riduce il rischio di usare div generici in modo eccessivo;
• si migliora la compatibilità con tecnologie assistive.

Best practice

Per usare correttamente <article>, <aside> e <nav> in un blog, tieni presenti queste buone pratiche:

• Usa <article> solo per contenuti autonomi: se una sezione non ha senso da sola, probabilmente non è un article.
• Non abusare di <aside>: inserisci solo contenuti davvero secondari. Se il contenuto è importante per capire il post, deve stare nell’articolo.
• Limita <nav> ai blocchi di navigazione significativi: non trasformare ogni lista di link in un menu.
• Usa titoli coerenti: ogni sezione importante dovrebbe avere un heading chiaro, così la struttura risulta più leggibile.
• Supporta l’accessibilità: quando hai più navigazioni, aggiungi etichette descrittive con aria-label.
• Ordina il contenuto in modo logico: il lettore deve incontrare prima il contenuto principale e poi gli elementi secondari.

Un errore frequente è mettere la sidebar dentro l’articolo solo perché “è vicina visivamente”. In realtà, se il contenuto è secondario rispetto al post, <aside> è la scelta giusta. Allo stesso modo, il menu principale del sito non dovrebbe essere confuso con una semplice lista di link nel footer.

Riepilogo

In un blog ben progettato, la semantica HTML fa davvero la differenza. Con <article> rappresenti il post come contenuto autonomo, con <nav> organizzi i link di navigazione principali e con <aside> aggiungi informazioni secondarie ma utili.

Questa struttura non è solo “più pulita”: è più robusta, più accessibile e più facile da mantenere nel tempo. Se stai sviluppando un blog tecnico o una piattaforma editoriale, adottare questi elementi semantici ti aiuta a creare pagine più professionali e scalabili.

Approfondisci con risorse ufficiali

• MDN Web Docs - <article>: documentazione dettagliata sull’uso dell’elemento article.
• MDN Web Docs - <aside>: spiegazione pratica dei contenuti complementari.
• MDN Web Docs - <nav>: guida all’uso corretto della navigazione semantica.
• WHATWG HTML Living Standard: specifica ufficiale del linguaggio HTML.
• WAI-ARIA Authoring Practices: risorse utili per migliorare accessibilità e navigazione.