<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.

Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !

Attributs

Comme tous les éléments HTML, ces éléments acceptent les attributs universels.

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 niveaux inférieurs ne doivent pas être utilisé afin de réduire la taille de la police d'un titre : 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.

• Il est préférable d'éviter d'utiliser plus d'un élément <h1> sur une même page. Voir Définir_des_sections_en_HTML5 in Structures et sections d'un document HTML5 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 :

1. h1 Les abeilles
   1. h2 Étymologie
   2. h2 Répartition
   3. h2 Évolution
      1. h3 Paléozoïque ancien
      2. h3 Jurassique
      3. h3 Crétacée
   4. h2 Morphologie externe
      1. h3Tête
         1. h4 Mandibules
      2. h3 Thorax
         1. h4 Prothorax
         2. h4 Ptérothorax
      3. h3 Pattes
      4. h3 Ailes
      5. h3 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
• 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.

• Utiliser l'attribut aria-labelledby
• Libeller des régions - Structure d'une page - Tutoriels W3C WAI pour l'accessibilité web (en anglais)

Spécifications

Compatibilité des navigateurs

Voir aussi

• <p>
• <div>
• <section>