Attention, cette version d'AcceDe Web est obsolète,
pour consulter la dernière version, se rendre sur www.accede-web.com/notices/ !

1.1.2. 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>, si nécessaire. La structure des titres doit être à la fois logique et exhaustive.

C’est-à-dire :

  • Qu’il ne doit pas y avoir de “sauts” ni d’incohérences dans la structure des titres (passage brutal d’un <h1> à un <h3> sans <h2> intermédiaire, par exemple).
  • Que tous les éléments qui ont valeur de titres doivent être balisés comme tels.

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 ?

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.

HTML5

À partir de HTML5, il devient possible de mettre en place une hiérarchie de titres complète, à plusieurs niveaux, en utilisant uniquement la balise <h1> et les nouvelles balises destinées à créer des sections dans le document, comme <article> ou <section>. Il devient également possible de laisser des “sauts” dans la structure des titres.

Toutefois, il est préférable, pour le moment, de continuer à structurer les titres de manière logique et exhaustive, comme cela était fait avant HTML5. C’est-à-dire en utilisant les titres de <h1> à <h6>. Ceci, jusqu’à ce que le développement de HTML5 soit finalisé et que le langage soit bien pris en compte par les navigateurs et les aides techniques.

Exemples

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

    <h1><a href="/"><img src="atos.png" alt="Atos (aller à l'accueil)" title="Atos (aller à l'accueil)" /></a></h1>
    […]
    <h2>Mission Handicap</h2>
    […]
    <h3>Contact</h3>
    […]
    <h3>Ils vous parlent de valeurs...</h3>
    <h4>Eric, consultant :</h4>
    […]
    <h4>Fabrice Narbeburu, Responsable Mission Handicap France :</h4>
    […]

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

    <a href="/"><img src="atos.png" alt="Atos (aller à l'accueil)" title="Atos (aller à l'accueil)" /></a>
    […]
    <h1>Mission Handicap</h1>
    […]
    <h2>Contact</h2>
    […]
    <h2>Ils vous parlent de valeurs...</h2>
    <h3>Eric, consultant :</h3>
    […]
    <h3>Fabrice Narbeburu, Responsable Mission Handicap France :</h3>
    […]

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

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

    <a href="/"><img src="atos.png" alt="Atos (aller à l'accueil)" title="Atos (aller à l'accueil)" /></a>
    […]
    <h2>Mission Handicap</h2>
    […]
    <h4>Contact</h4>
    […]
    <p>Ils vous parlent de valeurs...</p>
    <h6>Eric, consultant :</h6>
    […]
    <h6>Fabrice Narbeburu, Responsable Mission Handicap France :</h6>
    […]

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 <h2> à un <h4> sans <h3> intermédiaire, par exemple). Aussi, le titre “Ils vous parlent de valeurs…“ n’est pas balisé comme tel.

Quelques outils pratiques

Il existe des extensions de navigateurs permettant de mettre en avant la structure de titres employée sur une page :

Recommandations associées

notices/html-css/mettre-en-place-une-hierarchie-de-titres-logique-et-exhaustive-avec-les-balises-h1-a-h6.txt · Dernière modification: Le 06/03/2013 à 16:34 (modification externe)
 

Projet coordonné par Atalan.

En partenariat avec :

Et le soutien de :