Guida HTML interattiva: Titoli (h1-h6)

Q: Quanti tag di titolo ci sono in HTML?

Sei: , , , , e . è il più importante (il titolo della pagina) e il meno importante. Non esiste ; un tag del genere viene trattato come un elemento inline sconosciuto.

Q: Quali sono le dimensioni predefinite dei titoli HTML?

Con il testo predefinito a 16px, i browser mostrano h1 a 32px (2em), h2 a 24px (1.5em), h3 a 18.72px (1.17em), h4 a 16px (1em), h5 a 13.28px (0.83em) e h6 a 10.72px (0.67em), tutti in grassetto.

Q: Posso avere più di un h1 in una pagina?

L'HTML lo permette, ma un solo che dà il nome alla pagina è la struttura più chiara per chi usa un lettore di schermo e per i motori di ricerca. Usa per le sezioni principali sotto di lui.

Q: Come cambio la dimensione di un titolo?

Imposta font-size nel CSS, per esempio h2 { font-size: 20px; } o una classe su un singolo titolo. Non scegliere mai un livello di titolo per la sua dimensione predefinita.

Titoli HTML: da h1 a h6, dimensioni, ordine e stile

L'HTML ha sei livelli di titolo, da <h1> a <h6>, che danno alla pagina la sua struttura. Scopri le dimensioni predefinite, come ordinare i titoli, quanti tag h1 usare, come cambiarne la dimensione con il CSS e come li usano i lettori di schermo.

Questa pagina include editor eseguibili: modifica, esegui e vedi subito l'output.

Di Kevin Spektor, Cofondatore e CTO

Pubblicato il Sep 24, 2026

I sei tag di titolo dell'HTML

L'HTML ha sei livelli di titolo, da <h1> a <h6>. <h1> è il livello più alto (il titolo della pagina) e <h6> il più basso. I browser mostrano ogni livello più piccolo del precedente, tutti in grassetto, ognuno sulla sua riga:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Headings</title>
</head>
<body>
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
  <p>A paragraph, for comparison.</p>
</body>
</html>

Tag	Dimensione predefinita	Con testo a 16px
`<h1>`	2em	32px
`<h2>`	1.5em	24px
`<h3>`	1.17em	18.72px
`<h4>`	1em	16px
`<h5>`	0.83em	13.28px
`<h6>`	0.67em	10.72px

<h5> e <h6> di default sono più piccoli del testo normale, e questo sorprende molti. La dimensione è solo un valore predefinito, e le prossime sezioni mostrano perché il livello non va mai scelto in base alla dimensione.

I titoli sono la struttura della pagina

I titoli non sono decorazione. Insieme formano la struttura della pagina, come l'indice di un libro. Chi usa un lettore di schermo salta da un titolo all'altro per trovare quello che cerca, e i motori di ricerca li leggono per capire gli argomenti della pagina.

La regola è semplice: un <h1> per il titolo della pagina, <h2> per ogni sezione principale, <h3> per le sottosezioni dentro un <h2> e così via, senza saltare livelli. Questo esempio costruisce un indice a partire dai titoli, nello stesso modo in cui li vedono gli strumenti di assistenza:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Outline</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #toc { background: #e5e7eb; padding: 8px 12px; border-radius: 6px; font-size: 14px; }
  </style>
</head>
<body>
  <div id="toc"></div>
  <h1>Pasta recipes</h1>
  <h2>Tomato sauce</h2>
  <h3>Ingredients</h3>
  <h3>Steps</h3>
  <h2>Pesto</h2>
  <h3>Ingredients</h3>
  <script>
    const lines = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')].map((h) => {
      const level = Number(h.tagName[1]);
      return '\u00a0'.repeat((level - 1) * 4) + h.tagName.toLowerCase() + ': ' + h.textContent;
    });
    document.getElementById('toc').innerHTML = lines.join('<br>');
  </script>
</body>
</html>

Cambia il secondo <h3> in <h5> e la struttura mostra un buco: chi naviga per titoli si chiederebbe dov'è finito h4.

Cambiare la dimensione di un titolo

Scegli il livello in base alla posizione nella struttura, poi imposta l'aspetto con il CSS. Il titolo di una barra laterale può dover essere un <h2> ma sembrare piccolo; un titolo principale può essere un <h1> molto grande:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Heading size</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 { font-size: 44px; margin-bottom: 4px; }
    h2 { font-size: 18px; color: #2563eb; text-transform: uppercase; letter-spacing: 0.05em; }
    .quiet { font-weight: 500; font-size: 16px; color: #4b5563; }
  </style>
</head>
<body>
  <h1>Big hero title</h1>
  <h2>Small section label</h2>
  <p>Still an h2 for screen readers, whatever it looks like.</p>
  <h2 class="quiet">A quiet h2 with a class</h2>
</body>
</html>

Vale anche al contrario: non usare un tag di titolo solo per rendere un testo grande o in grassetto. Per le parole in grassetto dentro una frase usa <strong>, e per un testo grande che non è un titolo usa un <p> con una classe. Vedi grassetto e corsivo per i tag del testo.

Sottotitoli e slogan

Un sottotitolo subito sotto un titolo di solito non è a sua volta un titolo: non apre una nuova sezione. Usa un paragrafo, e se vuoi raggruppa la coppia con <hgroup>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Subtitle</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    hgroup h1 { margin-bottom: 0; }
    hgroup p { margin-top: 4px; color: #4b5563; font-size: 18px; }
  </style>
</head>
<body>
  <hgroup>
    <h1>Coffee Guide</h1>
    <p>Everything about brewing at home</p>
  </hgroup>
  <h2>Grinding</h2>
</body>
</html>

La struttura resta pulita (un h1, poi le sezioni h2), e lo slogan resta visivamente accanto al titolo.

Link a un titolo

Dai a un titolo un id e qualsiasi link con #id nel suo href ci salta direttamente. È così che funzionano gli indici e i pulsanti "copia link alla sezione":

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Heading links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    section { min-height: 400px; border-top: 2px solid #e5e7eb; }
  </style>
</head>
<body>
  <nav><a href="#install">Install</a> | <a href="#usage">Usage</a></nav>
  <section><h2 id="install">Install</h2></section>
  <section><h2 id="usage">Usage</h2></section>
</body>
</html>

Errori comuni

Scegliere il livello per la sua dimensione. Scegli in base alla posizione nella struttura, poi dai stile con il CSS.
Saltare livelli. Passare da <h2> direttamente a <h4> rompe la navigazione per chi usa un lettore di schermo.
Titoli per dare enfasi. Una riga in grassetto dentro un paragrafo è <strong>, non <h4>.
Nessun <h1>, o un logo come unico <h1>. L'<h1> deve dare il nome al contenuto della pagina, come il titolo dell'articolo o del prodotto.
Titoli vuoti. Un titolo con solo un'icona o niente dentro viene annunciato come vuoto. Mettici del testo vero.

Domande frequenti

Quanti tag di titolo ci sono in HTML?

Sei: <h1>, <h2>, <h3>, <h4>, <h5> e <h6>. <h1> è il più importante (il titolo della pagina) e <h6> il meno importante. Non esiste <h7>; un tag del genere viene trattato come un elemento inline sconosciuto.

Quali sono le dimensioni predefinite dei titoli HTML?

Con il testo predefinito a 16px, i browser mostrano h1 a 32px (2em), h2 a 24px (1.5em), h3 a 18.72px (1.17em), h4 a 16px (1em), h5 a 13.28px (0.83em) e h6 a 10.72px (0.67em), tutti in grassetto.

Posso avere più di un h1 in una pagina?

L'HTML lo permette, ma un solo <h1> che dà il nome alla pagina è la struttura più chiara per chi usa un lettore di schermo e per i motori di ricerca. Usa <h2> per le sezioni principali sotto di lui.

Posso saltare dei livelli, per esempio da h2 a h4?

Evitalo. Chi usa un lettore di schermo si muove per livelli di titolo, e un salto da h2 a h4 fa pensare a una sezione mancante. Scegli il livello in base alla posizione nella struttura e cambia la dimensione con il CSS.

Come cambio la dimensione di un titolo?

Imposta font-size nel CSS, per esempio h2 { font-size: 20px; } o una classe su un singolo titolo. Non scegliere mai un livello di titolo per la sua dimensione predefinita.

Concetti correlati