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.

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, presentation
Interface DOM HTMLHeadingElement

Attributs

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

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

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

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.

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>' dans cette spécification.
Standard évolutif  
HTML5
La définition de '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>' dans cette spécification.
Recommendation  
HTML 4.01 Specification
La définition de '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>' dans cette spécification.
Recommendation  

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple Oui Oui1 Oui Oui Oui
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple Oui Oui Oui4 Oui Oui Oui

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, marie-ototoi, Bat, tregagnon, ThePrisoner
Dernière mise à jour par : SphinxKnight,