1.8. Mettre en place une hiérarchie de titres logique et exhaustive avec les balises <h1> à <h6>

Sur chaque page, pour baliser les titres, utiliser les balises de titres allant de <h1> jusqu’à <h6>. La structure des titres doit être à la fois logique et exhaustive.

C’est-à-dire :

Remarques

  • Il n’est jamais gênant d’utiliser plusieurs <h1> dans une page si plusieurs titres de premier niveau sont présents.
  • Une bonne pratique d’accessibilité consiste à ne pas ajouter de titres cachés.

Astuce

Pour mettre en place une hiérarchie de titres logique et exhaustive, il faut imaginer que les titres forment la « Table des matières » de la page. Est-elle logique ? Exhaustive ?

Remarque

Le role ARIA heading associé à un attribut aria-level (renseigné avec une valeur allant de 1 à 6) permet d’affecter la valeur d’un titre à n’importe quelle balise HTML.

Concrètement, par exemple :

  • <p role="heading" aria-level="1">Titre de niveau 1</p> est sémantiquement équivalent à <h1>Titre de niveau 1</h1>.
  • <div role="heading" aria-level="3">Titre de niveau 3</div> à <h3>Titre de niveau 3</h3>.

Cette technique n’étant toutefois pas optimale pour l’accessibilité, elle est à utiliser en ultime recours.

Exemples

Capture d'écran de la page d'accueil du site de Lafarge.

Ci-dessous, 3 exemples de structuration de titres pour cette page. Les deux premiers sont corrects tandis que le troisième est incorrect.

Exemple 1 (correct)

<h1><a href="/"><img src="lafarge.png" alt="Lafarge - Construire des villes meilleures (aller à l'accueil)" /></a></h1>
[…]
<h2>Les sables & granulats décoratifs et esthétiques Lafarge</h2>
[…]
<h3>Contacts</h3>
[…]
<h3>À lire également</h3>
[…]
<h3>Nos réalisations Granulats</h3>
[…]

Dans cet exemple de code HTML, la structure des titres est logique et exhaustive.

Exemple 2 (correct)

<a href="/"><img src="lafarge.png" alt="Lafarge - Construire des villes meilleures (aller à l'accueil)" /></a>
[…]
<h1>Les sables & granulats décoratifs et esthétiques Lafarge</h1>
[…]
<h2>Contacts</h2>
[…]
<h2>À lire également</h2>
[…]
<h2>Nos réalisations Granulats</h2>
[…]

Dans cet exemple de code HTML, la structure des titres est également logique et exhaustive.

À noter que d’autres structurations de titres sont envisageables.

Exemple 3 (incorrect)

<a href="/"><img src="lafarge.png" alt="Lafarge - Construire des villes meilleures (aller à l'accueil)" /></a>
[…]
<h1>Les sables & granulats décoratifs et esthétiques Lafarge</h1>
[…]
<p class="titre">Contacts</p>
[…]
<h4>À lire également</h4>
[…]
<h4>Nos réalisations Granulats</h4>
[…]

Dans cet exemple de code HTML, la structure des titres est incorrecte car elle comporte des « sauts » et des incohérences (passage brutal d’un <h1> à des <h4>.
Aussi, le titre « Contacts » n’est pas balisé comme tel.

Aller plus loin

4 commentaires

  • Par Sébastien Delorme, le 10 août 2017 à 17h24.

    Fiche mise à jour le 10 août 2017 : suppression de l’encart Attention qui mentionne l’outline HTML5.

    Répondre

  • Par Sébastien Delorme, le 20 décembre 2018 à 14h47.

    Fiche mise à jour le 20 décembre 2018 : remplacement de l’expression « n’importe quelle balise <html> » par « n’importe quelle balise HTML ».

    Répondre

  • Par sahla tata, le 5 février 2019 à 11h13.

    Êtes-vous sûr que nous avons le doit d’utiliser plus d’un seul h1 dans une page ?

    Répondre

    • Par Johan Ramon, le 5 février 2019 à 16h23.

      Bonjour,

      Côté accessibilité, nous vous confirmons qu’il est tout à fait possible d’utiliser plusieurs balises <h1> dans une page web.

      À ce propos, on peut par exemple lire dans la partie « Titre » du glossaire du RGAA (Référentiel Général d’Accessibilité pour les Administrations) : « Dans chaque page web, il doit y avoir un titre h1, au moins. »

      Johan

      Répondre

Ajouter un commentaire

Les champs avec astérisque (*) sont obligatoires.

Haut de page