Usa una gerarchia di intestazioni pulita

Cosa controlla questo check

Analizza ogni elemento di intestazione della pagina (h1–h6) in ordine di documento e verifica che i livelli scendano senza salti. Il check fallisce quando un h4 appare prima di qualunque h3, quando due h1 stanno sulla stessa pagina, o quando la profondità di sezione salta di più di un livello.

Perché è importante

Un’outline pulita conta in tre punti contemporaneamente.

• Gli screen reader annunciano il livello di intestazione a ogni salto. Un utente che naviga per intestazioni (un pattern comune per chi non vede) sente “intestazione livello 2 — funzionalità, intestazione livello 4 — prezzi” e presume che un livello 3 sia stato saltato. La pagina diventa non navigabile.
• I motori di ricerca leggono ancora l’outline delle intestazioni come indizio sulla struttura tematica. Un h1 seguito da cinque h3 senza nessun h2 viene letto come un blob piatto di contenuto invece che come un articolo organizzato.
• Gli estrattori IA (ChatGPT browsing, Perplexity, Google AI Overviews) suddividono i contenuti lungo i confini delle intestazioni quando riassumono. Una gerarchia rotta produce chunk che spaziano su più argomenti, abbassando la qualità delle citazioni.

Come risolvere

Usa esattamente un solo h1 per pagina — di solito il titolo della pagina. Ogni intestazione successiva scende al massimo di un livello alla volta:

<h1>Confronto auricolari wireless nel 2026</h1>
  <h2>Cosa abbiamo testato</h2>
    <h3>Qualità audio</h3>
    <h3>Durata batteria</h3>
  <h2>Migliori in assoluto: Sony WF-1000XM5</h2>
    <h3>Pro</h3>
    <h3>Contro</h3>

La scorciatoia dello stile visivo. I designer a volte usano <h4> perché “ha la dimensione giusta”. Non farlo: scegli il livello che si adatta all’outline del documento, poi stilizzalo con CSS. Tailwind: <h3 class="text-base font-semibold">.

WordPress / page builder. La maggior parte dei block editor (Gutenberg, Elementor) permette di cambiare il livello di un’intestazione indipendentemente dal suo stile. Scorri la pagina una volta e ri-taggalo ogni blocco.

Astro / Next.js / React. Crea un piccolo wrapper <Section> che incrementa un context di livello di intestazione, così i componenti riutilizzabili non hard-codano <h3> e non rompono l’outline quando annidati.

Verifica tu stesso — incolla l’URL della pagina nel validatore HTML del W3C e guarda l’anteprima dell’outline del documento, oppure usa l’estensione browser headingsMap.

Domande frequenti

Posso avere due h1 su una pagina?

HTML5 tecnicamente permette più h1 dentro elementi <section> o <article>, ma ogni vendor di tecnologie assistive — e Google — considera ancora un solo h1 per pagina come il pattern corretto. Tieniti su uno. Vedi la pagina Tag H1.

E le sidebar e i widget?

Anche le intestazioni dentro <aside> o regioni di layout ripetute contano per l’outline. O abbassale a <h3> così si annidano sotto il contenuto principale, o avvolgile in un landmark con il proprio scope di intestazione.

Influisce sui punteggi Lighthouse o di accessibilità?

Sì — heading-order è una delle regole axe-core che Lighthouse esegue. Una gerarchia rotta abbassa direttamente il tuo punteggio accessibilità Lighthouse.