<h1>-<h6> : les éléments de titre de section
Les éléments <h1>
à <h6>
représentent six niveaux de titres dans un document, <h1>
est le plus important et <h6>
est le moins important. Un élément de titre décrit brièvement le sujet de la section qu'il introduit.
Exemple interactif
Attributs
Ces éléments acceptent uniquement les attributs universels (communs à l'ensemble des éléments).
Note : L'attribut align
est obsolète et ne doit pas être utilisé.
Notes d'utilisation
- L'information d'un titre peut être utilisée par les agents utilisateurs, par exemple, pour construire automatiquement une table des matières d'un document.
- Les titres ne doivent pas être utilisé afin de réduire ou d'augmenter la taille de la police d'un texte : il faut pour cela utiliser la propriété CSS
font-size
à la place. - On évitera de sauter des niveaux de titre : on commence toujours par
<h1>
puis<h2>
et ainsi de suite. On essaye également d'avoir un seul titre de niveau 1 sur une page. - Jusqu'à HTML5, il fallait éviter d'utiliser plus d'un élément
<h1>
sur une même page. En HTML5, il est possible d'utiliser les balises sémantiques pour créer une hiérarchie valide avec plusieurs<h1>
. Voir Définir_des_sections_en_HTML5 in <h1>-<h6> : les éléments de titre de section pour plus d'informations.
Exemples
Tous les titres
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
Exemple de page
HTML
<h1>Élément de titre</h1>
<h2>Présentation</h2>
<p>Du texte...</p>
<h2>Exemples</h2>
<h3>Exemple 1</h3>
<p>Du texte...</p>
<h3>Exemple 2</h3>
<p>Du texte...</p>
<h2>Voir également</h2>
<p>Du texte...</p>
Résultat
Accessibilité
Navigation
Les personnes utilisant des lecteurs d'écran utilisent fréquemment les niveaux de titre en passant de l'un à l'autre afin de déterminer rapidement le contenu de la page. Pour cette raison, il est important de ne pas sauter un niveau de titre. En effet, l'absence d'un titre intermédiaire pourrait amener le lecteur à se demander où le titre a été placé.
Mauvaises pratiques
<h1>Heading level 1</h1>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
Bonnes pratiques
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
Imbrication
Les niveaux de titres peuvent être imbriqués afin de créer des sous-sections qui reflètent l'organisation de la page. La plupart des lecteurs d'écran peuvent également générer une liste ordonnée des titres de la page afin d'aider les visiteurs à connaître la hiérarchie du contenu :
h1
Les abeillesh2
Étymologieh2
Répartitionh2
Évolutionh3
Paléozoïque ancienh3
Jurassiqueh3
Crétacée
h2
Morphologie externeh3
Têteh4
Mandibules
h3
Thoraxh4
Prothoraxh4
Ptérothorax
h3
Pattesh3
Ailesh3
Abdomen
Lorsque les niveaux sont imbriqués, il est possible de sauter un niveau lorsqu'on ferme une sous-section
- Les titres et la structure d'une page - Tutoriels WAI pour l'accessibilité web (en anglais)
- Comprendre les règles WCAG 1.3
- Comprendre les règles WCAG 2.4 (en-US)
- Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0 (en anglais)
- Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0 (en anglais)
- Understanding Success Criterion 2.4.6 | W3C Understanding WCAG 2.0 (en anglais)
- Understanding Success Criterion 2.4.10 | W3C Understanding WCAG 2.0 (en anglais)
Libeller une section
Les outils comme les lecteurs d'écran peuvent également générer une liste du contenu sectionnant afin de déterminer le plan de la page.
Le contenu sectionnant peut être libellé en combinant les attributs aria-labelledby
et id
. Dans ce cas, le libellé décrit, de façon concise, le but de la section. Cette technique s'avère utile lorsqu'on a une page qui possède plusieurs éléments sectionnants.
Exemple
<header>
<nav aria-labelledby="primary-navigation">
<h2 id="primary-navigation">Outils de navigation</h2>
<!-- éléments relatifs à la navigation -->
</nav>
</header>
<!-- contenu de la page -->
<footer>
<nav aria-labelledby="footer-navigation">
<h2 id="footer-navigation">Navigation dans le pied de page</h2>
<!-- éléments relatifs à la navigation -->
</nav>
</footer>
Dans l'exemple qui précède, un lecteur d'écran annoncerait deux section <nav>
, l'une étant appelée "Outils de navigation" et l'autre "Navigation dans le pied de page". Si les libellés n'avaient pas été fournis, la personne utilisant un lecteur d'écran aurait été obligée d'étudier les contenus de chaque élément nav
afin d'en déterminer l'objectif.
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 qui accepte le
contenu de flux
; n'utilisez pas de titre comme enfant d'un élément
<hgroup> , c'est à présent obsolète.
|
Rôles ARIA autorisés | tab (en-US) , presentation |
Interface DOM | HTMLHeadingElement |
Spécifications
Specification |
---|
HTML Standard # the-h1,-h2,-h3,-h4,-h5,-and-h6-elements |
Compatibilité des navigateurs
BCD tables only load in the browser