Gerarchia dei titoli h1–h6: perché conta per accessibilità e SEO

I titoli HTML, da <h1> a <h6>, costruiscono l’indice logico della pagina. Non servono a fare testo grande o piccolo: servono a dire quali contenuti sono principali, quali sono sottosezioni e quali dettagli appartengono a un blocco più specifico.

Il modello mentale

Pensa alla pagina come a un documento con un indice.

<h1>Portfolio di Mario Rossi</h1>

<h2>Chi sono</h2>
<p>...</p>

<h2>Progetti</h2>

<h3>Portfolio personale</h3>
<p>...</p>

<h3>Dashboard meteo</h3>
<p>...</p>

<h2>Contatti</h2>
<p>...</p>

Il browser non impone questa struttura, ma gli strumenti di accessibilità la usano per permettere una navigazione rapida. Una persona che usa uno screen reader può saltare da un titolo all’altro per capire subito cosa contiene la pagina.

Regole pratiche

1. Usa l’<h1> per il tema principale della pagina.
2. Usa <h2> per le sezioni principali.
3. Usa <h3> per sottosezioni dentro un <h2>.
4. Non saltare livelli senza motivo: da <h2> a <h4> manca un passaggio logico.
5. Non scegliere il titolo in base alla dimensione grafica. Se un <h2> ti sembra troppo grande, ridimensionalo con CSS.

Un solo h1?

Per un corso base, la regola più semplice e sicura è: usa un solo <h1> per pagina.

HTML moderno permette strutture più complesse, ma nella maggior parte dei siti introduttivi un solo <h1> rende la pagina più chiara, più facile da verificare e più coerente con le aspettative degli strumenti SEO.

Esempio scorretto

<h1>Portfolio</h1>
<h3>Progetti</h3>
<h2>Chi sono</h2>
<h5>Contatti</h5>

Qui i livelli non seguono una gerarchia. Il problema non è estetico: il documento comunica una struttura confusa.

Esempio corretto

<h1>Portfolio di Mario Rossi</h1>

<h2>Chi sono</h2>
<p>...</p>

<h2>Progetti</h2>
<h3>App meteo</h3>
<h3>Landing page ristorante</h3>

<h2>Contatti</h2>

Esercizio

Scrivi la struttura dei titoli di una pagina personale senza CSS. Se leggendo solo i titoli riesci a capire contenuto e ordine della pagina, la gerarchia è buona.