HTML semantico

Cosa verifica questo controllo

Scansiona il DOM renderizzato e conta gli elementi HTML5 semantici — <article>, <section>, <nav>, <header>, <footer>, <aside>, <main>, <figure>, <figcaption>, <time> — rispetto al conteggio totale degli elementi. Le pagine costruite quasi interamente con <div> e <span> annidati prendono un punteggio basso; le pagine con uno scheletro semantico chiaro prendono alto.

Perché è importante

L’HTML semantico è la differenza tra markup che una macchina può parsare e markup che una macchina può capire. Un <div class="header"> è invisibile a qualunque cosa non legga le tue classi CSS. Un <header> è inequivocabile: ogni browser, screen reader, crawler di ricerca e agente LLM sa che ruolo gioca quel blocco nella pagina.

Tre pubblici leggono il tuo HTML:

• Gli agenti AI (ChatGPT, Perplexity, AI Overviews di Google) estraggono e citano contenuto. Tirano in modo affidabile da <article>, <main> e tag <time datetime>. Tirano a indovinare dentro la zuppa di div.
• Gli screen reader generano una mappa di landmark della pagina così gli utenti possono saltare direttamente a navigazione, contenuto principale o footer. Niente tag semantici significa niente landmark. Abbina questo controllo a landmark ARIA.
• I motori di ricerca pesano il contenuto dentro <article> e <main> più alto del contenuto dentro container generici — e ignorano in modo affidabile il boilerplate dentro <nav> e <footer>.

La correzione è economica. Il costo di non farlo si accumula su ogni pagina del sito.

Come sistemarlo

Sostituisci i container generici con l’elemento che ne descrive il ruolo.

Chrome di pagina:

<!-- Prima -->
<div class="site-header">
  <div class="nav">...</div>
</div>
<div class="main-content">...</div>
<div class="site-footer">...</div>

<!-- Dopo -->
<header>
  <nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>

Post di blog e articoli: avvolgi ogni post in <article> e marca le date con <time datetime>. L’attributo datetime è leggibile dalla macchina e compare nelle citazioni AI e nell’auto-estrazione Schema.org.

<article>
  <header>
    <h1>Titolo del post</h1>
    <time datetime="2026-05-11">11 maggio 2026</time>
  </header>
  <p>Corpo del post...</p>
</article>

Immagini con didascalia: usa <figure> + <figcaption> quando la didascalia è parte del contenuto (non un semplice tooltip in hover).

<figure>
  <img src="chart.png" alt="Crescita ricavi 2024-2026" />
  <figcaption>Ricavi trimestrali, Q1 2024 fino a Q1 2026.</figcaption>
</figure>

Quando usare <section> vs <div>: usa <section> per una regione nominata della pagina — una che avrebbe un’intestazione in un outline (Prezzi, Funzionalità, FAQ). Usa <div> per raggruppamenti puramente presentazionali (un wrapper flex, un bordo di card). Se non riesci a scrivere un’intestazione di una riga per esso, è un <div>.

Incrocia il risultato con landmark ARIA e testo descrittivo dei link — quei controlli si rinforzano a vicenda.

Domande frequenti

Conta se uso <div role="main"> invece di <main>?

Per l’accessibilità sono equivalenti — entrambi espongono un landmark main. Per tutti gli altri (agenti AI, crawler di ricerca, revisori di codice), <main> è più chiaro e più corto. Usa l’elemento nativo. I ruoli ARIA esistono per rattoppare elementi che non possono esprimere il loro ruolo, non per sostituire quelli che possono.

Posso avere più <header> e <footer> per pagina?

Sì. <header> e <footer> sono scoped alla loro più vicina antenata di sezionamento (<article>, <section>, <main> o il documento). Un post di blog può avere il suo <header> (titolo + data) dentro <article>, più il <header> site-wide in cima alla pagina. <main> è l’eccezione — solo uno per documento.

Il tema del mio CMS usa div ovunque. Vale la pena riscrivere?

Se controlli il template, sì — è una modifica una tantum che migliora accessibilità, SEO ed estraibilità AI per ogni pagina che lo usa. Se non lo controlli (un tema hosted su Shopify/Squarespace), concentrati sullo slot di contenuto dove hai controllo: avvolgi i post in <article>, marca le date con <time>, usa <figure> per immagini con didascalia. Il chrome migliorerà quando il tema verrà aggiornato.