Indice

<h1>-<h6>: gli elementi "intestazione di sezione"

Gli elementi da <h1> a <h6> HTML rappresentano sei livelli di intestazioni di sezione. <h1> è il livello di sezione più alto e <h6> è il più basso.

Note d'uso

  • Le informazioni sull'intestazione possono essere utilizzate dagli interpreti per costruire automaticamente un sommario per un documento.

  • Evita di utilizzare elementi di intestazione per ridimensionare il testo. Utilizzare invece la proprietà CSS font-size .

  • Evita di saltare i livelli di intestazione: inizia sempre da <h1>, seguito da <h2> e così via.

  • Usa solo un <h1> per pagina. Dovrebbe descrivere in modo conciso lo scopo generale del contenuto.

Più elementi <h1> su una pagina

L'utilizzo di più di un <h1> è consentito dalle specifiche HTML, ma non è considerato una best practice. Usare solo un <h1> è vantaggioso per gli utenti di screen reader.

La specifica HTML include il concetto di uno schema formato dall'uso di elementi <section>. Se ciò fosse implementato, consentirebbe l'uso di più elementi <h1>, fornendo agli agenti utente, inclusi i lettori di schermo, un modo per capire che un <h1> annidato all'interno di una sezione definita è un sottotitolo. Questa funzionalità non è mai stata implementata; pertanto è importante utilizzare le intestazioni per descrivere lo schema del documento.

Esempi

Tutti i titoli

Il codice seguente mostra tutti i livelli di intestazione in uso.

<h1>Intestazione di livello 1</h1>
<h2>Intestazione di livello 2</h1>
<h3>Intestazione di livello 3</h1>
<h4>Intestazione di livello 4</h1>
<h5>Intestazione di livello 5</h1>
<h6>Intestazione di livello 6</h1>

Esempio di pagina

Il codice seguente mostra alcune intestazioni con alcuni contenuti sotto di esse.

<h1>Intestazione</h1>
<h2>Sommario</h2>
<p>Testo di un paragrafo</p>

<h2>Esempio</h2>
<h3>Esempio 1</h3>
<p>Testo di un paragrafo</p>

<h3>Esempio 2</h3>
<p>Testo di un paragrafo</p>

<h2>Vedi pure</h2>
<p>Testo di un paragrafo</p>

Problemi di accessibilità

Navigazione

Una tecnica di navigazione comune per gli utenti di software di lettura dello schermo consiste nel passare da un'intestazione all'altra per determinare rapidamente il contenuto della pagina. Per questo motivo, è importante non saltare uno o più livelli di intestazione. Ciò potrebbe creare confusione, poiché la persona che naviga in questo modo potrebbe rimanere a chiedersi dove sia l'intestazione mancante.

Da non fare

<h1>Intestazione di livello 1</h1>
<h2>Intestazione di livello 2</h2>
<h4>Intestazione di livello 4</h4>

Buona pratica

<h1>Intestazione di livello 1</h1>
<h2>Intestazione di livello 2</h2>
<h3>Intestazione di livello 3</h3>

Nidificazione

Le intestazioni possono essere nidificate come sottosezioni per riflettere l'organizzazione del contenuto della pagina. La maggior parte delle utilità per la lettura dello schermo può anche generare un elenco ordinato di tutte le intestazioni di una pagina, che può aiutare una persona a determinare rapidamente la gerarchia del contenuto.

Etichettatura dei contenuti di sezione

Un'altra tecnica di navigazione comune per gli utenti che utilizzano un software di lettura dello schermo consiste nel generare un elenco di contenuti di sezione e utilizzarlo per determinare il layout della pagina.

Il contenuto della sezione può essere etichettato utilizzando una combinazione degli attributi aria-labelledby e id, con l'etichetta che descrive in modo conciso lo scopo della sezione. Questa tecnica è utile per le situazioni in cui è presente più di un elemento di sezionamento nella stessa pagina.