Usare article, aside e nav per una pagina blog più leggibile e ordinata

Introduzione

Quando si costruisce un blog o una sezione articoli, non basta mettere insieme titoli e paragrafi. Una buona struttura HTML aiuta il browser, i motori di ricerca e le tecnologie assistive a capire quali contenuti sono principali, quali sono correlati e come l’utente può muoversi nella pagina.

In questo tutorial vediamo un uso pratico di tre elementi semantici fondamentali:

• <article> per contenuti autonomi, come un post di blog;
• <aside> per contenuti laterali o correlati, come bio autore, box “articoli consigliati” o callout;
• <nav> per i blocchi di navigazione, come menu principale, indice interno o paginazione.

L’obiettivo è creare una pagina blog realistica, accessibile e facile da manutenere. Non ci limiteremo alla teoria: vedrai anche un esempio completo, commentato e pronto da adattare a un progetto reale.

Codice completo

<nav aria-label="Navigazione principale">
  <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 organizzare un post tecnico con HTML semantico</h1>
      <p>
        Pubblicato il <time datetime="2026-05-27">27 maggio 2026</time>
        da <strong>Luca Rossi</strong>
      </p>
    </header>

    <p>
      Un articolo ben strutturato rende più chiaro il contenuto e migliora
      l’esperienza di lettura. In questa guida vediamo come separare il testo
      principale dai contenuti secondari usando elementi semantici corretti.
    </p>

    <h2>Perché la semantica è utile</h2>
    <p>
      La semantica aiuta a descrivere il significato del contenuto, non solo il suo aspetto.
      Questo è importante per accessibilità, SEO e manutenzione del codice.
    </p>

    <h2>Esempio di struttura</h2>
    <p>
      Un articolo può contenere introduzione, sezioni interne e una conclusione.
      Ogni parte resta dentro lo stesso <code>article</code> perché appartiene
      a un unico contenuto autonomo.
    </p>

    <footer>
      <p>Tag: HTML, accessibilità, semantica</p>
    </footer>
  </article>

  <aside aria-label="Contenuti correlati">
    <h2>Articoli correlati</h2>
    <ul>
      <li><a href="/blog/html-accessibile">HTML accessibile: le basi</a></li>
      <li><a href="/blog/seo-semantic-html">Semantica HTML e SEO</a></li>
      <li><a href="/blog/struttura-documento">Strutturare una pagina con elementi semantici</a></li>
    </ul>
  </aside>

  <aside aria-label="Informazioni autore">
    <h2>Chi scrive</h2>
    <p>
      Luca Rossi è uno sviluppatore front-end specializzato in HTML semantico,
      accessibilità e architetture di contenuto.
    </p>
  </aside>
</main>

<nav aria-label="Navigazione articoli">
  <ul>
    <li><a href="/blog/post-precedente">Articolo precedente</a></li>
    <li><a href="/blog/post-successivo">Articolo successivo</a></li>
  </ul>
</nav>

Spiegazione

Vediamo come funziona questa struttura e perché è migliore di un layout costruito solo con <div>.

<article>: il contenuto principale e autonomo

<article> rappresenta un contenuto che ha senso anche da solo. Un post di blog, una notizia, una scheda prodotto o un commento indipendente sono esempi tipici. Nel nostro caso, l’intero post tecnico è racchiuso in un solo articolo perché può essere letto, condiviso o salvato come unità separata.

Dentro l’articolo abbiamo usato:

• <header> per titolo, autore e data;
• paragrafi introduttivi e sezioni tematiche;
• <footer> per i tag o le informazioni finali.

Questa organizzazione rende il contenuto più chiaro anche per gli screen reader e per i crawler dei motori di ricerca.

<aside>: contenuti secondari o correlati

<aside> serve per informazioni che non fanno parte del flusso principale, ma lo arricchiscono. Nel blog può contenere:

• articoli correlati;
• box autore;
• note extra;
• promo o link utili.

Nel nostro esempio abbiamo usato due <aside>: uno per i contenuti correlati e uno per la bio dell’autore. Questa scelta è utile perché separa chiaramente il testo principale dalle informazioni di supporto.

<nav>: navigazione chiara e identificabile

<nav> segnala una sezione di navigazione. Non va usato per ogni lista di link, ma solo per blocchi che aiutano davvero l’utente a spostarsi nel sito o nella pagina. Abbiamo inserito:

• la navigazione principale del sito in alto;
• la navigazione tra articoli in fondo alla pagina.

L’attributo aria-label è importante quando ci sono più elementi nav: permette di distinguerli con un nome comprensibile, ad esempio “Navigazione principale” o “Navigazione articoli”.

Perché non usare solo div?

Con i <div> puoi costruire qualsiasi layout, ma il browser non capisce il ruolo di ogni blocco. Con gli elementi semantici, invece, il significato è esplicito. Questo porta vantaggi concreti:

• migliore accessibilità;
• struttura più leggibile;
• manutenzione più semplice;
• maggiore chiarezza per SEO e strumenti automatici.

Best practice

Per usare bene <article>, <aside> e <nav>, tieni presenti queste regole pratiche:

• Usa article solo per contenuti indipendenti: se il blocco non avrebbe senso da solo, probabilmente non è un article.
• Non trasformare tutto in aside: un contenuto laterale deve essere davvero secondario, non una parte essenziale della lettura.
• Limita nav ai veri blocchi di navigazione: menu, breadcrumb, indice, paginazione, link di sezione.
• Etichetta i nav con aria-label se ne usi più di uno nella stessa pagina.
• Mantieni una gerarchia di titoli chiara: un solo h1 per l’articolo principale, poi h2, h3 e così via.
• Usa article annidati con attenzione: ad esempio per commenti o post correlati, ma solo se ogni blocco è autonomo.

Un errore comune è usare <aside> per contenuti che in realtà sono parte essenziale del contenuto principale. Se togli il blocco e il testo perde senso, allora non è davvero un aside.

Un altro errore frequente è mettere troppi link dentro <nav> senza una logica precisa. La navigazione deve essere utile e riconoscibile, non un contenitore generico di collegamenti.

Riepilogo

In una pagina blog ben progettata, i tre elementi lavorano insieme in modo complementare:

• <article> identifica il post come unità autonoma;
• <aside> raccoglie informazioni secondarie o correlate;
• <nav> guida l’utente tra sezioni, pagine o articoli.

Questa combinazione migliora la qualità del markup e rende il progetto più professionale. Se impari a distinguere con precisione contenuto principale, contenuto laterale e navigazione, scriverai HTML più pulito e più facile da evolvere nel tempo.

Approfondisci con risorse ufficiali

• MDN Web Docs - article: documentazione completa e esempi pratici sull’elemento article.
• MDN Web Docs - aside: guida all’uso corretto di aside nei layout semantici.
• MDN Web Docs - nav: spiegazione dell’elemento nav e dei casi d’uso più comuni.
• W3C HTML Standard: specifica ufficiale per approfondire il significato semantico degli elementi.
• WAI-ARIA Authoring Practices: utile per capire come etichettare correttamente le aree di navigazione con attributi accessibili.