L'HTML5 semantico

L'HTML5 semantico consiste nello scegliere tag che descrivono la natura del contenuto (<article>, <nav>, <main>) piuttosto che tag generici (<div>, <span>) che non portano alcun significato. Questa differenza aiuta direttamente i motori e le IA a isolare il contenuto utile dal resto della pagina.

Perché la semantica conta

Un <div> non dice nulla sul proprio contenuto: può contenere tanto il testo principale di un articolo quanto un blocco pubblicitario o un menu di navigazione. Un tag semantico, invece, porta un'informazione esplicita sul ruolo del blocco che racchiude. Per una macchina che deve decidere quale parte di una pagina costituisce il contenuto principale da indicizzare o citare, questa informazione è direttamente utilizzabile, senza dover indovinare a partire da euristiche incerte (posizione, classe CSS, quantità di testo).

Prima dell'introduzione dell'HTML5, gli sviluppatori usavano già convenzioni di denominazione per dare un senso ai propri tag (<div class="header">, <div class="nav">), ma queste classi CSS non hanno alcun valore semantico standardizzato: un motore non può sapere con certezza che una classe chiamata "header" corrisponda realmente a un'intestazione, dato che qualsiasi sviluppatore può nominare le proprie classi come preferisce. I tag HTML5 semantici, invece, formano un vocabolario comune e non ambiguo, interpretato allo stesso modo da tutti i sistemi che leggono HTML.

I tag semantici chiave

<body>
  <header>
    <nav><!-- menu principale --></nav>
  </header>

  <main>
    <article>
      <h1>Titolo dell'articolo</h1>
      <section>
        <h2>Prima parte</h2>
        <p>...</p>
      </section>
      <section>
        <h2>Seconda parte</h2>
        <p>...</p>
      </section>
    </article>
    <aside><!-- contenuto correlato, non essenziale --></aside>
  </main>

  <footer><!-- link di fondo pagina, note legali --></footer>
</body>

<header>: intestazione di pagina o di sezione (non necessariamente la parte visivamente in alto della pagina).
<nav>: blocco di link di navigazione.
<main>: contenuto principale unico della pagina — un solo tag <main> per pagina.
<article>: contenuto autonomo, che avrebbe senso anche isolato dal resto della pagina (un post di blog, una scheda prodotto).
<section>: raggruppamento tematico all'interno di un articolo o di una pagina — da usare solo quando la sezione ha un proprio titolo logico (generalmente un tag Hn), non come semplice suddivisione visiva.
<aside>: contenuto correlato ma non essenziale (link associati, box pubblicitario).
<footer>: piè di pagina o di sezione.

Isolare il contenuto utile dal rumore

Una pagina web raramente contiene solo contenuto principale: menu di navigazione, banner sui cookie, box pubblicitari, footer con link legali e social occupano spesso una parte importante dell'HTML. Senza strutturazione semantica, una macchina deve indovinare quale proporzione del testo estratto sia realmente pertinente. Un markup corretto con <nav>, <aside> e <footer> chiaramente separati da <main> e da <article> riduce questo rumore e concentra l'attenzione sul contenuto che conta davvero — una questione direttamente legata al modo in cui un motore legge la vostra pagina.

Su alcuni siti, il contenuto di navigazione e i box periferici rappresentano una quota dell'HTML più importante del contenuto principale stesso, in particolare sulle pagine brevi. In questo caso, una strutturazione semantica precisa diventa ancora più determinante affinché una macchina non sovrappesi questo rumore rispetto al testo che conta realmente.

Errori frequenti

Codificare tutto in <div> con classi CSS, senza alcun tag semantico — una scelta ancora diffusa sui siti generati da alcuni builder visivi.
Usare più tag <main> sulla stessa pagina.
Collocare il contenuto editoriale principale in un <aside> per errore di struttura.
Usare <section> come semplice contenitore di stile senza un reale raggruppamento tematico.
Annidare un <article> all'interno di un <nav> o di un <aside>, il che contraddice la logica stessa di questi tag.

Un beneficio che va oltre il SEO

L'HTML5 semantico migliora anche l'accessibilità: i lettori di schermo si basano su questi stessi tag per permettere a un utente ipovedente di navigare direttamente verso il contenuto principale, senza dover scorrere il menu a ogni pagina. Uno stesso sforzo di strutturazione serve quindi contemporaneamente l'accessibilità, il SEO classico e il GEO.

Migrare un sito esistente verso una struttura semantica

Ristrutturare un sito già costruito con <div> generici non richiede necessariamente un rifacimento completo. Nella maggior parte dei casi, si tratta di sostituire i tag contenitori esistenti con il loro equivalente semantico (<div class="main-content"> diventa <main>, <div class="site-footer"> diventa <footer>) senza toccare il CSS che già punta a questi elementi tramite la loro classe. Questa migrazione progressiva, template per template, permette di migliorare la struttura senza rischiare di rompere l'impaginazione visiva esistente — un progetto realistico anche su un sito già in produzione.

Per approfondire ciò che questa strutturazione permette una volta estratto il testo, la lezione sul chunking spiega come un LLM suddivide poi questo contenuto in blocchi utilizzabili, e la lezione sui dati strutturati Schema.org mostra come spingersi ancora oltre nella chiarezza delle informazioni trasmesse.