Tag HTML <h1>-<h6>

Gli elementi da <h1> a <h6> vengono utilizzati per definire sei livelli di titoli HTML, dove <h1> rappresenta il livello più alto (o più importante) e <h6> quello meno importante.

Suggerimento

Ogni pagina web deve avere un solo titolo <h1>. Poiché i motori di ricerca lo utilizzano per indicizzare la struttura e il contenuto dei documenti web, assicurarsi di includervi le parole chiave.

Gli user agent possono usare le informazioni sui titoli per creare automaticamente un indice dei contenuti di un documento.

Se si desidera ridimensionare il testo, è meglio non usare i tag di intestazione. Si può usare invece la proprietà CSS font-size. Si raccomanda di non saltare i livelli di intestazione (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>) e di usare <h1> una sola volta per pagina.

I tag dei titoli hanno anche valore SEO. Un motore di ricerca cerca di scoprire due cose riguardo alla pagina: di cosa tratta e quanto è valida. Una delle cose principali che i motori di ricerca considerano per determinare il contenuto della pagina sono le parole all'interno dei tag di intestazione.

Quando una pagina contiene un singolo contenuto, il titolo principale deve trovarsi in un tag <h1>, le sezioni più ampie devono essere incluse in <h2> e così via. In questo modo si può rendere il contenuto più organizzato. Si deve tenere presente che nessuno legge ogni singola parola del contenuto.

Esistono due tipi di pagine con contenuto: pagine a contenuto singolo e pagine indice. Nelle pagine a contenuto singolo, il titolo di quel contenuto deve trovarsi in <h1> vicino alla parte superiore di <body>. In una pagina indice, il titolo del sito o il nome dell'indice viene solitamente inserito in <h1>. I titoli delle singole parti elencate devono quindi usare i tag <h2>.

Poiché i tag da <h1> a <h6> sono elementi a livello di blocco, iniziano sempre su una nuova riga e occupano tutta la larghezza disponibile.

Per impostazione predefinita, i browser mostrano i tag <h1>-<h6> con il seguente CSS, dove il font-size diminuisce a ogni livello mentre il font-weight rimane in grassetto:

margin-left: 0;
margin-right: 0;
font-weight: bold;
display: block;

Sintassi

I tag <h1>-<h6> vengono in coppia, quindi il tag di chiusura è obbligatorio.

Esempio dei tag HTML `<h1>`-`<h6>`:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>First-level heading</h1>
    <h2>Second-level heading</h2>
    <h3>Third-level heading</h3>
    <h4>Fourth-level heading</h4>
    <h5>Fifth-level heading</h5>
    <h6>Sixth-level heading</h6>
  </body>
</html>

Provalo tu stesso »

Pericolo

Gli elementi <h1>-<h6> non devono essere usati per contrassegnare sottotitoli, didascalie, titoli alternativi e slogan, a meno che non siano destinati a essere il titolo di una nuova sezione o sottosezione.

Suggerimento

Poiché l'attributo align non è supportato in HTML5, usare invece la proprietà CSS text-align.

Strutturare il documento con i titoli

I titoli non riguardano le dimensioni — riguardano la struttura. Pensate a <h1>-<h6> come all'indice della vostra pagina. <h1> denomina l'intera pagina, ogni <h2> apre una sezione principale e <h3> (e i livelli più profondi) annidano sottosezioni al suo interno, proprio come 1 → 1.1 → 1.1.1 in un indice stampato.

Nell'esempio seguente, un articolo ha un titolo <h1>, due sezioni <h2> e una sottosezione <h3> annidata all'interno di una di esse. Leggendo solo i titoli si capisce già di cosa tratta la pagina:

<!DOCTYPE html>
<html>
  <head>
    <title>Growing Tomatoes at Home</title>
  </head>
  <body>
    <article>
      <h1>Growing Tomatoes at Home</h1>
      <p>A beginner's guide to a healthy tomato harvest.</p>

      <h2>Choosing a Variety</h2>
      <p>Cherry tomatoes are forgiving; beefsteak types need more care.</p>

      <h2>Planting and Care</h2>
      <p>Tomatoes need full sun and consistent watering.</p>

      <h3>Watering Schedule</h3>
      <p>Water deeply two to three times a week, more often in heat.</p>

      <h3>Common Pests</h3>
      <p>Watch for aphids and hornworms on the underside of leaves.</p>
    </article>
  </body>
</html>

Result

I titoli <h3> appartengono alla sezione <h2> "Planting and Care" perché appaiono dopo di essa e ne descrivono le parti. Si noti che nell'esempio non si salta mai da <h1> direttamente a <h3> — ogni livello segue quello precedente.

Applicare stili ai titoli con CSS

Per cambiare l'aspetto di un titolo — colore, dimensione, allineamento o spaziatura — usare CSS, non un livello di intestazione diverso. Scegliere il tag di intestazione in base alla sua posizione nell'indice, poi applicarvi liberamente gli stili:

<!DOCTYPE html>
<html>
  <head>
    <title>Styled headings</title>
    <style>
      h1 {
        color: #224cc5;
        text-align: center;
      }
      h2 {
        color: #22c599;
        font-size: 22px;
      }
      h3 {
        color: #bc22c5;
        text-transform: uppercase;
        letter-spacing: 2px;
      }
    </style>
  </head>
  <body>
    <h1>Growing Tomatoes at Home</h1>
    <h2>Choosing a Variety</h2>
    <h3>Watering Schedule</h3>
  </body>
</html>

Result

Accessibilità e ordine dei titoli

Gli utenti di screen reader raramente leggono una pagina dall'inizio alla fine. Piuttosto aprono un elenco di titoli e saltano tra di essi, così come un lettore normovedente scorge i titoli in grassetto. Questo funziona solo quando i titoli formano un indice corretto e senza lacune.

Due regole rendono i titoli accessibili:

Non saltare i livelli. Procedere <h1> → <h2> → <h3>, non <h1> → <h3>. Un livello saltato fa sì che la tecnologia assistiva segnali una sezione priva di elemento padre.
Non scegliere un titolo in base alle sue dimensioni visive. Se si vuole un titolo di sezione piccolo, usare il livello corretto (ad esempio <h3>) e ridimensionarlo con CSS font-size. Non usare mai <h4> solo perché appare più piccolo.

I due frammenti di codice seguenti contrassegnano lo stesso contenuto. Il primo rompe l'indice; il secondo lo mantiene intatto:

<!-- ❌ Bad: skips from h1 to h3, then jumps back to h2 -->
<h1>Page Title</h1>
<h3>Introduction</h3>
<h2>Main Section</h2>
<h5>A Detail</h5>

<!-- ✅ Good: every level follows the one above it -->
<h1>Page Title</h1>
<h2>Introduction</h2>
<h2>Main Section</h2>
<h3>A Detail</h3>

Informazione

Usare un solo <h1> per pagina. Il tag <h1> risponde alla domanda "di cosa tratta questa pagina?" — averne diversi confonde questa risposta sia per i motori di ricerca che per gli screen reader. (Si può trovare un vecchio consiglio che permetteva un <h1> per ogni <article> o <section>; si basava su un algoritmo di struttura del documento che nessun browser ha mai implementato, quindi è bene attenersi a un singolo <h1> per pagina.) Il titolo della pagina mostrato nella scheda del browser viene impostato separatamente con il tag <title> all'interno di <head>.

Per una visione d'insieme di come i sei livelli funzionano insieme, vedere il capitolo sui titoli HTML.

Attributi

I tag da <h1> a <h6> non hanno attributi specifici dell'elemento. Due attributi dell'insieme globale sono particolarmente comuni sui titoli:

Attributo	Valore	Descrizione
id	text	Assegna al titolo un identificatore univoco in modo che possa essere puntato da un link ancoraggio (`#section-name`) o da CSS e JavaScript.
align	left, right, center, justify	Imposta l'allineamento orizzontale del titolo. Deprecato — non supportato in HTML5; usare invece la proprietà CSS text-align.

Un uso comune di id consente ai lettori di saltare direttamente a una sezione:

<h2 id="planting">Planting and Care</h2>

<!-- Elsewhere on the page or site -->
<a href="#planting">Skip to Planting and Care</a>

I tag da <h1> a <h6> supportano anche gli Attributi Globali e gli Attributi Evento.

Esercizi

Pratica

Seleziona tutte le opzioni applicabili: quali affermazioni sui tag di intestazione HTML sono vere?

I tag di intestazione vanno da h1 a h6, con h1 come livello più alto e h6 come livello più basso.I tag di intestazione comprendono solo h1 e h2.Si deve scegliere un tag di intestazione in base alla sua posizione nell'indice, non in base alle sue dimensioni.Il tag HTML h1 viene usato per definire le intestazioni meno importanti.I tag di intestazione non possono essere applicati per elementi annidati.