I tag dei titoli H1, H2, H3, H4, H5 e H6 sono fondamentali per organizzare il contenuto di una pagina web. Servono sia ai lettori per capire la struttura del testo, sia ai motori di ricerca per indicizzare meglio il sito. In questo articolo vediamo cosa sono, come usarli correttamente e quali errori evitare.
Cos’è un tag H1
Il H1 è il titolo principale della pagina. Deve comparire una sola volta e deve riassumere perfettamente l’argomento.
<h1>Tag HTML per i titoli: H1, H2, H3, H4, H5 e H6</h1>
Regole H1:
- Una sola H1 per pagina
- Deve contenere le parole chiave principali
- Deve essere chiaro e leggibile
- Non deve superare le 60-70 parole
❌ SBAGLIATO:
<h1>Benvenuti sul nostro sito</h1> <!-- Troppo generico -->
✅ GIUSTO:
<h1>Come usare i tag H1-H6 in HTML</h1>
Gli H2: titoli delle sezioni principali
Gli H2 suddividono l’articolo in sezioni principali. Ogni H2 rappresenta un argomento importante.
<h1>Tag HTML per i titoli</h1>
<h2>Cos'è un tag H1</h2>
<p>Spiegazione...</p>
<h2>Come usare gli H2</h2>
<p>Spiegazione...</p>
<h2>Errori da evitare</h2>
<p>Spiegazione...</p>
Regole H2:
- 3-7 H2 per articolo medio
- Devono seguire logica sequenziale
- Contengono parole chiave secondarie
Gli H3: sottosezioni
Gli H3 approfondiscono un argomento dell’H2. Sono i titoli delle sottosezioni.
<h2>Come usare gli H2</h2>
<h3>Numero ideale di H2</h3>
<p>Per un articolo...</p>
<h3>Differenza tra H2 e H1</h3>
<p>Il principale...</p>
Regole H3:
- Mai saltare livelli (da H2 direttamente a H4)
- Più piccoli degli H2
- Specifici e dettagliati
H4, H5, H6: quando usarli
Questi tag sono per livelli sempre più profondi:
<h2>Esempi pratici</h2>
<h3>Esempio 1: Blog post</h3>
<h4>Struttura completa</h4>
<p>...</p>
Usa H4-H6 solo se:
- L’articolo è molto lungo (>3000 parole)
- Hai bisogno di molti livelli di dettaglio
- Il contenuto è tecnico/complesso
Esempio pratico completo
Ecco una pagina ben strutturata:
<!DOCTYPE html>
<html>
<head>
<title>Come usare i tag H1-H6 - Guida completa</title>
</head>
<body>
<h1>Come usare i tag H1-H6 in HTML</h1>
<h2>Gerarchia dei titoli</h2>
<p>Explicazione...</p>
<h3>H1: titolo principale</h3>
<p>Regole...</p>
<h2>Errori comuni</h2>
<h3>Molteplici H1</h3>
<p>Per ogni...</p>
<h3>Titoli solo per stile</h3>
<p>Non usare...</p>
</body>
</html>
H1 vs Tag Title: differenza fondamentale
Attenzione: H1 e title non sono la stessa cosa!
<title> (nella <head>):
<title>Tag H1-H6: guida completa HTML</title>
- Compare su Google
- 55-60 caratteri
- Principalmente per SEO
<h1> (nel <body>):
<h1>Come usare i tag H1, H2, H3 in HTML</h1>
- Visibile nella pagina
- Può essere più lungo
- Per utenti + SEO
Regola: H1 e title simili ma non identici.
Errori da evitare
❌ 1. Più H1 nella stessa pagina
<h1>Titolo 1</h1>
<!-- contenuto -->
<h1>Titolo 2</h1> <!-- SBAGLIATO! -->
❌ 2. Saltare livelli
<h1>Main title</h1>
<h3>Subsection</h3> <!-- SBAGLIATO! Manca H2 -->
❌ 3. Usare titoli solo per stile
<h2 style="font-size: 48px">Testo grande</h2> <!-- SBAGLIATO -->
❌ 4. H1 generico
<h1>Home</h1> <!-- Poco utile per SEO -->
Consigli SEO pratici
- Un solo H1 per pagina
- Gerarchia logica: H1 → H2 → H3 → H4
- Parole chiave naturali nei titoli
- Lunghezza: H1 20-70 caratteri, H2/H3 più brevi
- Coerenza: titoli che rispecchiano il contenuto
Vantaggi per accessibilità
I titoli aiutano anche chi usa screen reader:
- Navigano direttamente tra H1, H2, H3
- Capiscono subito la struttura della pagina
- Possono saltare sezioni
Esempio screen reader:
H1: Come usare i tag H1-H6
H2: Gerarchia dei titoli
H3: H1: titolo principale
H2: Errori comuni</code>
Controllo rapido della tua pagina
Apri F12 → Elements → cerca h1, h2, h3:
- 1 solo H1
- H1 → H2 → H3 (senza salti)
- Titoli descrittivi
- H1 diverso dal <title>
Conclusione
I tag H1-H6 non sono solo per la formattazione: sono la struttura logica della tua pagina. Usati bene migliorano:
- SEO: Google capisce meglio i contenuti
- Esperienza utente: navigazione più chiara
- Accessibilità: utile a tutti i lettori