Gerarchia degli heading

Un solo H1

Gli heading (h1–h6) non servono solo a ingrandire il testo: definiscono la gerarchia informativa della pagina. Chi legge al volo, chi usa uno screen reader e i motori di ricerca si affidano a questa scaletta per capire di cosa parla ogni blocco. La regola base per una pagina autonoma è semplice: un solo <h1>, che corrisponde al titolo principale del contenuto (servizio, articolo, scheda prodotto). Se metti due H1, l’outline diventa ambiguo e perdi chiarezza sia in accessibilità sia in SEO on-page.

Livelli H2 e H3

Ogni sezione tematica importante merita un <h2>. I sotto-argomenti dentro quella sezione diventano <h3>, e così via. L’ordine deve essere sequenziale: dopo un H2 puoi aprire un H3, ma non saltare direttamente a H4 solo perché ti piace la dimensione del font nel foglio stile. Se salti livelli, gli screen reader annunciano una struttura incoerente e gli strumenti che generano un indice automatico mostrano buchi difficili da interpretare.

Non usare heading per evidenziare frasi a caso: per enfasi visiva bastano classi CSS o un <strong>. Un errore frequente nelle landing è impilare H2 decorativi («Perché sceglierci», «I nostri numeri») senza contenuto sotto: meglio un H2 seguito da paragrafi e liste reali.

Esempio pratico

Immagina una pagina servizi per uno studio fotografico. L’H1 introduce l’offerta; gli H2 separano le linee di business; gli H3 dettagliano pacchetti o fasi del lavoro.

<main>
  <h1>Servizi fotografici a Torino</h1>
  <p>Reportage e ritratti per privati e aziende.</p>

  <h2>Matrimoni</h2>
  <h3>Cerimonia in chiesa</h3>
  <p>Copertura discreta dall’ingresso al ricevimento.</p>
  <h3>Sessione coppia in location</h3>
  <p>Un’ora al tramonto con cambio abiti.</p>

  <h2>Ritratti professionali</h2>
  <p>Headshot per LinkedIn e siti corporate.</p>
</main>

Outline e screen reader

Le tecnologie assistive permettono di saltare da un heading all’altro con scorciatoie da tastiera. Un outline pulito riduce il tempo per trovare «Prezzi» o «Contatti» in una pagina lunga. Anche chi scansiona visivamente la pagina beneficia di titoli brevi e descrittivi: «FAQ» va bene se la sezione contiene davvero domande frequenti; «Domande su tempi e consegna» è ancora più chiaro.

Allinea H1 e title tag: non devono essere identici carattere per carattere, ma devono parlare dello stesso argomento. L’H1 può essere più conversazionale; il title può includere brand o località per i risultati di ricerca.

Heading dal CMS

Editor WYSIWYG spesso permettono H1 nel body: blocca H1 nel template pagina e limita editor a H2–H3. Per landing modulari, ogni modulo dovrebbe iniziare con H2 se introduce sezione nuova, non H4 per « essere più piccolo ». Export verso PDF o stampa eredita outline: gerarchia corretta migliora anche indice automatico PDF.

Nei siti multilingua mantieni stessa struttura heading tra lingue per facilitare manutenzione e hreflang.

Errori comuni

• Più H1 nella stessa pagina perché ogni blocco hero ne ha uno.
• Salto da H1 a H4 per «risparmiare» livelli intermedi.
• Heading vuoti o ripetuti («Introduzione» cinque volte nel sito).
• Stili CSS su paragrafi che imitano heading senza tag semantici.
• H2 usati solo in sidebar o footer per testo secondario, spezzando l’outline del main.

In pratica, integra questo controllo nella routine di qualità del sito: una pagina campione al mese per categoria (home, servizio, articolo, checkout se presente), stesso profilo browser e rete. Annota nel registro interno data verifica e esito, così al prossimo redesign sai cosa è già stato validato. Quando il team cresce, una checklist condivisa evita che ognuno interpreti i criteri in modo diverso e riduce regressioni dopo deploy frettolosi.

In breve

• Un solo H1 per pagina, nel contenuto principale.
• H2 per sezioni, H3 per sotto-sezioni, senza saltare livelli.
• Heading per struttura, CSS per dimensioni visive.
• Verifica l’outline con tastiera o DevTools accessibility.