<h1>-<h6> : les éléments de titre de section
Les éléments HTML <h1>
à <h6>
représentent les six niveaux de titre de section. <h1>
correspond au niveau de section le plus haut et <h6>
correspond au niveau le plus faible. Par défaut, tous les éléments de titre créent une boîte de niveau bloc dans la mise en page, commençant sur une nouvelle ligne et prenant toute la largeur disponible dans leur bloc conteneur.
Exemple interactif
<h1>Coléoptères</h1>
<h2>Morphologie externe</h2>
<h3>Tête</h3>
<h4>Mandibules</h4>
<h3>Thorax</h3>
<h4>Prothorax</h4>
<h4>Pterothorax</h4>
h1,
h2,
h3,
h4 {
margin: 0.1rem 0;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.5rem;
padding-left: 20px;
}
h3 {
font-size: 1.2rem;
padding-left: 40px;
}
h4 {
font-size: 1rem;
font-style: italic;
padding-left: 60px;
}
Attributs
Ces éléments incluent uniquement les attributs universels.
Notes d'utilisation
- Les informations de titre peuvent être utilisées par les agents utilisateur afin de construire automatiquement la table des matières d'un document.
- Il ne faut pas utiliser des éléments de titre pour ajuster la taille du texte. Pour cela, on utilisera la propriété CSS
font-size
. - Il ne faut pas sauter de niveaux entre les titres : on commencera toujours par
<h1>
, suivi<h2>
et ainsi de suite.
Éviter d'avoir plusieurs éléments <h1>
sur une page
Bien qu'il soit permis par le standard HTML d'utiliser plusieurs éléments <h1>
sur une même page tant que ceux-ci ne sont pas imbriqués, cela est considéré comme une mauvaise pratique. Une page devrait généralement avoir un seul élément <h1>
qui décrit le contenu de la page (semblable à l'élément <title>
).
Note :
L'imbrication de plusieurs éléments <h1>
au sein d'éléments sectionnants imbriqués était autorisée dans d'anciennes versions du standard HTML. Toutefois, cela a toujours été considéré comme une mauvaise pratique et ce n'est plus conforme. Pour en savoir plus, vous pouvez lire le billet There Is No Document Outline Algorithm d'Adrian Roselli (en anglais).
Mieux vaudra donc utiliser un seul élément <h1>
par page et l'imbrication de titres d'autres niveaux sans sauter de niveaux.
Définir une taille de police uniforme pour <h1>
Avant mai 2025, le standard HTML (angl.) spécifiait que les éléments <h1>
contenus dans un élément <section>
, <article>
, <aside>
ou <nav>
devaient s'afficher comme un <h2>
(taille de police plus petite et margin-block
ajustée), ou comme un <h3>
s'ils étaient imbriqués d'un niveau supplémentaire, et ainsi de suite. Ce style par défaut dépendant du contexte a désormais été supprimé (angl.).
Pour garantir un rendu cohérent des <h1>
dans les navigateurs qui implémentent l'ancien style par défaut dépendant du contexte, utilisez la règle de style suivante :
h1 {
margin-block: 0.67em;
font-size: 2em;
}
Alternativement, pour éviter d'écraser d'autres règles de style ciblant <h1>
, vous pouvez utiliser :where()
, qui a une spécificité nulle :
:where(h1) {
margin-block: 0.67em;
font-size: 2em;
}
Accessibilité
>Navigation
Les personnes qui utilisent des lecteurs d'écran naviguent en sautant de titre en titre afin de déterminer rapidement le contenu de la page. Aussi, il faut éviter de sauter des niveaux de titre. En effet, s'il y a un trou, la personne qui navigue ainsi pourrait se demander où est passé le titre manquant.
À ne pas faire :
<h1>Titre de niveau 1</h1>
<h3>Titre de niveau 3</h3>
<h4>Titre de niveau 4</h4>
À privilégier :
<h1>Titre de niveau 1</h1>
<h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>
Imbrication
Les titres peuvent être imbriqués comme sous-sections pour refléter l'organisation du contenu d'une page. La plupart des lecteurs d'écran peuvent aussi générer une liste ordonnée de tous les titres d'une page, ce qui aide à déterminer rapidement la hiérarchie du contenu et à naviguer vers différents titres.
Étant donnée la structure de page suivante :
<h1>Coléoptères</h1>
<h2>Étymologie</h2>
<h2>Distribution et diversité</h2>
<h2>Évolution</h2>
<h3>Paléozoïque tardif</h3>
<h3>Jurassique</h3>
<h3>Crétacé</h3>
<h3>Cénozoïque</h3>
<h2>Morphologie externe</h2>
<h3>Tête</h3>
<h4>Mandibules</h4>
<h3>Thorax</h3>
<h4>Prothorax</h4>
<h4>Pterothorax</h4>
<h3>Pattes</h3>
<h3>Ailes</h3>
<h3>Abdomen</h3>
Les lecteurs d'écran généreraient une liste comme celle-ci :
h1
Coléoptères-
h2
Étymologie -
h2
Distribution et diversité -
h2
Évolutionh3
Paléozoïque tardifh3
Jurassiqueh3
Crétacéh3
Cénozoïque
-
h2
Morphologie externe-
h3
Têteh4
Mandibules
-
h3
Thoraxh4
Prothoraxh4
Pterothorax
-
h3
Pattes -
h3
Ailes -
h3
Abdomen
-
-
Lorsque les titres sont imbriqués, il est possible de sauter des niveaux lors de la fermeture d'une sous-section.
- Tutoriel sur la structure d'une page et les titres, par la WAI (angl.)
- Comprendre les règles pour l'accessibilité des contenus web (WCAG), explications sur la règle 1.3
- Comprendre le critère de succès 1.3.1, WCAG 2.0 (angl.)
- Comprendre les règles pour l'accessibilité des contenus web (WCAG), explications sur la règle 2.4
- Comprendre le critère de succès 2.4.1, WCAG 2.0 (angl.)
- Comprendre le critère de succès 2.4.6, WCAG 2.0 (angl.)
- Comprendre le critère de succès 2.4.10, WCAG 2.0 (angl.)
Libeller le contenu des sections
Une autre technique de navigation employée par les utilisateur·ice·s de lecteurs d'écran consiste à générer une liste du contenu sectionnant et à l'utiliser afin de déterminer le plan de la page.
Le contenu sectionnant peut être libellé en utilisant une combinaison des attributs aria-labelledby
et id
, où le libellé décrit de façon concise l'objet de la section. Cette technique s'avère utile lorsqu'il y a plus d'un élément sectionnant sur la même page.
Exemples de contenu sectionné
<header>
<nav aria-labelledby="navigation-1">
<h2 id="navigation-1">Navigation primaire</h2>
<!-- éléments de navigation -->
</nav>
</header>
<!-- Contenu de la page -->
<footer>
<nav aria-labelledby="navigation-2">
<h2 id="navigation-2">Navigation du pied de page</h2>
<!-- éléments de navigation -->
</nav>
</footer>
Avec cet exemple, un lecteur d'écran annoncera la présence de deux sections <nav>
, la première appelée « Navigation primaire » et l'autre appelée « Navigation du pied de page ». Si les libellés n'avaient pas été fournis, la personne aurait dû consulter le contenu de chaque élément <nav>
afin de déterminer leur utilité.
Exemples
>Tous les niveaux
On utilise ici tous les niveaux de titre.
HTML
<h1>Titre de niveau 1</h1>
<h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6</h6>
Résultat
Une page d'exemple
Ici, on utilise des titres avec du contenu intercalaire.
HTML
<h1>Éléments de titre</h1>
<h2>Résumé</h2>
<p>Du texte ici…</p>
<h2>Exemples</h2>
<h3>Exemple 1</h3>
<p>Du texte ici…</p>
<h3>Exemple 2</h3>
<p>Du texte ici…</p>
<h2>Voir aussi</h2>
<p>Du texte ici…</p>
Résultat
Résumé technique
Catégories de contenu | Contenu de flux, contenu de titre, contenu tangible. |
---|---|
Contenu autorisé | Contenu phrasé. |
Omission de balise | Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires. |
Parents autorisés | Tout élément acceptant du contenu de flux. |
Rôle ARIA implicite |
heading
|
Rôles ARIA autorisés |
tab , presentation , ou none
|
Interface DOM | HTMLHeadingElement |
Spécifications
Specification |
---|
HTML> # the-h1,-h2,-h3,-h4,-h5,-and-h6-elements> |
Compatibilité des navigateurs
>html.elements.h1
Loading…
html.elements.h2
Loading…
html.elements.h3
Loading…
html.elements.h4
Loading…
html.elements.h5
Loading…
html.elements.h6
Loading…