Intestazioni HTML
Un'intestazione è un titolo in cima a una pagina che aiuta i motori di ricerca a indicizzarne la struttura. Scopri i livelli, le dimensioni e l'importanza delle intestazioni HTML con esempi.
Le intestazioni suddividono una pagina in sezioni etichettate e classificate, allo stesso modo in cui i titoli di capitoli e sezioni organizzano un libro. In HTML si dispone di sei livelli, da <h1> (il più importante) fino a <h6> (il meno importante). Scegliere il livello corretto fa molto di più che rendere il testo grande: definisce la struttura del documento su cui si basano browser, tecnologie assistive e motori di ricerca per comprendere come è organizzato il contenuto.
Questa pagina tratta i sei tag di intestazione, come i loro livelli si annidano in una gerarchia, perché dimensione e livello sono aspetti separati, come gli utenti di screen reader navigano tramite le intestazioni e in cosa l'elemento <header> si differenzia da <h1>–<h6>.
Tag di Intestazione
In HTML esistono 6 livelli di intestazione: <h1>, <h2>, <h3>, <h4>, <h5> e <h6>.
I tag <h1> - <h6> vengono utilizzati per contrassegnare le intestazioni in base alla loro importanza. Il tag <h1> rappresenta l'intestazione più importante della pagina web e <h6> quella meno importante e più piccola.
Esempio dei tag di intestazione HTML <h1> - <h6>:
Come si usano i tag HTML <h1>-<h6>?
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>Per il riferimento completo su ogni livello, consulta i tag HTML <h1>–<h6>.
Gerarchia delle Intestazioni e Struttura del Documento
I livelli delle intestazioni non sono solo dimensioni — descrivono l'annidamento. Un <h2> viene letto come sottosezione del <h1> più vicino che lo precede, un <h3> è una sottosezione di quell'<h2>, e così via. Insieme, questi livelli annidati formano la struttura del documento: un albero che indica quali parti della pagina appartengono a quali altre.
Immagina un indice:
<h1>Baking Bread</h1> <!-- the page topic -->
<h2>Ingredients</h2> <!-- a section of "Baking Bread" -->
<h2>Method</h2> <!-- another section -->
<h3>Kneading</h3> <!-- a step inside "Method" -->
<h3>Proving</h3> <!-- another step inside "Method" -->
<h2>Troubleshooting</h2>Il rientro sopra è solo illustrativo — le intestazioni sono elementi fratelli nel markup e sono i numeri di livello a creare la gerarchia. Usa un solo <h1> per il tema principale della pagina, poi <h2> per le sezioni di primo livello, <h3> per le sottosezioni di queste ultime, e non ricorrere mai a un livello inferiore solo per ridurre il testo.
Accessibilità: Non Saltare i Livelli di Intestazione
Gli utenti di screen reader raramente leggono una pagina dall'inizio alla fine. Invece estraggono un elenco di tutte le intestazioni e saltano direttamente alla sezione desiderata, proprio come si scorre un indice. Questo funziona solo quando i livelli scendono in ordine — <h1>, poi <h2>, poi <h3> — senza lacune.
Saltare un livello (ad esempio, un <h1> immediatamente seguito da un <h3>) rompe la struttura: la tecnologia assistiva segnala un livello mancante e gli utenti non riescono a capire se sono entrati in una sottosezione o hanno semplicemente perso il filo.
Sbagliato — un livello viene saltato:
<h1>Our Menu</h1>
<h3>Starters</h3> <!-- jumps from h1 to h3, skipping h2 -->
<h3>Mains</h3>Corretto — i livelli scendono uno alla volta:
<h1>Our Menu</h1>
<h2>Starters</h2>
<h2>Mains</h2>
<h3>Vegetarian Mains</h3>Se un'intestazione appare troppo grande o troppo piccola al suo livello corretto, modifica l'aspetto con CSS — non il livello.
Importanza delle Intestazioni
- Le intestazioni HTML evidenziano gli argomenti importanti e la struttura del documento, migliorando così il coinvolgimento degli utenti.
- Usa un solo tag
<h1>su qualsiasi pagina web. Il tag deve descrivere l'argomento della pagina e contenere una parola chiave per migliorare il posizionamento su Google. - I motori di ricerca usano le intestazioni per indicizzare la struttura e il contenuto della pagina web.
Dimensione delle Intestazioni
I browser assegnano a ogni livello di intestazione una dimensione predefinita: <h1> è la più grande e <h6> la più piccola. È possibile sovrascrivere qualsiasi dimensione tramite la proprietà CSS font-size.
Il punto fondamentale: modificare la dimensione visiva di un'intestazione non cambia il suo livello semantico. Un <h2> stilizzato per apparire enorme è comunque un <h2> nella struttura, e un <h1> minuscolo è comunque l'intestazione di primo livello della pagina. Quindi scegli il tag in base alla posizione nella gerarchia, poi ridimensionalo come richiede il design — non scegliere mai un tag in base alle dimensioni con cui viene reso.
Esempio di modifica della dimensione dell'intestazione con la proprietà font-size:
Come applicare stili a un tag HTML <h1> usando la proprietà CSS font-size
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
font-size: 50px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>Note Importanti
- Non usare i tag di intestazione per aumentare la dimensione del testo o renderlo in grassetto. Usa invece le proprietà CSS come font-weight e font-size. Ricorda, i motori di ricerca usano le intestazioni per strutturare il contenuto.
- Non saltare i livelli di intestazione. Usa
<h1>come intestazione principale della pagina, seguita dalle intestazioni<h2>, poi dalle meno importanti<h3>, e così via. - Evita di usare
<h1>più di una volta in una pagina.
Elementi Correlati
Alcuni tag vengono comunemente visti insieme alle intestazioni ma appartengono ad argomenti propri:
- Il tag
<hr>disegna una separazione tematica tra sezioni di contenuto. - L'elemento
<head>contiene i metadati della pagina (titolo, set di caratteri, stili, script) e non fa parte del contenuto visibile.
Intestazione vs. Header: <h1>–<h6> vs. <header>
Questi due elementi si confondono facilmente perché i nomi si assomigliano, ma svolgono funzioni diverse:
- Un'intestazione (
<h1>–<h6>) è un singolo titolo che etichetta una sezione di contenuto e le attribuisce un livello nella struttura del documento. - Un header (
<header>) è un contenitore per il contenuto introduttivo in cima a una pagina o sezione — tipicamente un logo, il titolo del sito e la navigazione. Spesso contiene un'intestazione, ma non è esso stesso un'intestazione.
Confrontali fianco a fianco:
<!-- A heading: one ranked title -->
<h1>Weekly Newsletter</h1>
<!-- A header: a block of introductory content that wraps a heading -->
<header>
<img src="logo.png" alt="Acme logo" />
<h1>Weekly Newsletter</h1>
<nav>
<a href="/archive">Archive</a>
<a href="/subscribe">Subscribe</a>
</nav>
</header>In breve: inserisci un'intestazione dentro un header quando hai bisogno di un blocco introduttivo con titolo; usa un'intestazione senza wrapper quando devi solo etichettare una sezione. Scopri di più nel capitolo tag HTML <header>.