I Mattoni del Significato: HTML5 Semantico
Galdor: «Immagina di entrare in un edificio senza cartelli: le stanze esistono, ma non sai quale sia l’ingresso, dove si riuniscono le persone, dove sono gli archivi o le uscite. Una pagina web costruita solo con <div> è esattamente questo.»
Galdor: «Molti credono che la struttura serva a impaginare. In realtà serve a spiegare. Il layout lo vede l’occhio umano — la struttura la leggono i crawler, gli screen reader e le AI.»
Il saggio tracciò alcuni simboli sul terreno:
<header>: non è “la parte in alto”, ma l’introduzione logica della pagina<nav>: un insieme di collegamenti con funzione di orientamento<main>: il cuore semantico della pagina, ciò che la rende unica<section>: raggruppa contenuti tematicamente coerenti<article>: contenuto autonomo, indipendente, riutilizzabile<aside>: informazioni complementari, non centrali<footer>: la chiusura informativa e contestuale
Giovane: «Ciò che mi dici è nuovo — ho visto in passato pagine fatte solo di DIV.»
Galdor: «Il DIV non è sbagliato, però rimane muto. Un linguaggio fatto solo di parole mute costringe chi ascolta a indovinare. Le AI non amano indovinare — preferiscono premiare ciò che è esplicito, riducendo l’ambiguità semantica.»
I tag semantici HTML5 sono direttamente correlati alla capacità di Googlebot di costruire un'interpretazione strutturata della pagina. Il sistema di featured snippet extraction di Google si basa sulla struttura semantica per identificare le sezioni più rilevanti da estrarre.
BERT e MUM analizzano la struttura semantica del documento per comprendere le relazioni gerarchiche tra le sezioni — main, section, article definiscono esplicitamente queste relazioni.
Rilevanza per AI Search
- Google AI Overview: i tag semantici definiscono i confini delle sezioni da cui l'AI estrae informazioni. Un
<article>ben strutturato è il contenitore ideale per l'estrazione AI. - Perplexity / ChatGPT Search: i sistemi di retrieval analizzano la struttura semantica per identificare le sezioni più informative. Tag semantici corretti migliorano la precisione dell'estrazione.
- GEO: usare tag semantici HTML5 correttamente è uno dei prerequisiti tecnici fondamentali per la visibilità nei motori generativi.
L'uso corretto dei tag semantici HTML5 permette di dichiarare in modo chiaro il ruolo di ciascun blocco di contenuto, migliorando la comprensione della pagina e permettendo la generazione di snippet migliori.
Regole fondamentali:
- Evitare l'uso eccessivo di
<div>a scopo strutturale - Mantenere una sola area
<main>per pagina - Indicare chiaramente la navigazione con
<nav> - Strutturare
<section>e<article>con titoli coerenti (<h2>-<h3>) per creare una gerarchia chiara - Inserire
<aside>solo quando il contenuto non è centrale alla pagina <header>e<footer>possono ripetersi all'interno di sezioni specifiche
| Tag | Significato semantico | Uso corretto |
|---|---|---|
| <header> | Introduzione logica | Logo, navigazione principale, hero section |
| <nav> | Navigazione | Menu principale, breadcrumb, paginazione |
| <main> | Contenuto principale unico | Un solo per pagina — il corpo centrale |
| <section> | Sezione tematica | Sotto-argomento con proprio titolo H2 |
| <article> | Contenuto autonomo | Post blog, scheda prodotto, recensione |
| <aside> | Contenuto complementare | Sidebar, note a margine, widget |
| <footer> | Chiusura informativa | Copyright, NAP, link secondari |
Amar Amoretti lavora su internet — un posto vasto, complicato e pieno di cose che probabilmente ti stai perdendo. Ha realizzato yaoki.academy con l'obiettivo dichiarato di rendere la SEO/GEO o come diavolo volete chiamarla comprensibile agli esseri umani. Questo è considerato da molti un atto di ottimismo cosmico.