Cet article fait suite à une discussion qui fait rage actuellement sur la liste accesstech. La question est la suivante : peut-on utiliser plusieurs éléments h1 dans une page web ?

Derrière ce qui pourrait sembler être un inutile débat sur le sexe des anges se cache un problème réel quand à la structure sémantique du language XHTML. C’est pourquoi je mets la main à la pâte pour vous offrir un petit rappel du rôle et de l’utilisation de cette balise.

Ce que l’on pense :

Voici, pour nous servir de base, un extrait d’un article du Web Access Centre Blog : Better Connected, Better Results: Headings :

The rules for Headings are simple:

1. Every page must have at least one (the H1)
2. Only one H1 per page
3. The H1 must be applied to the main heading of the page
4. The H1 should ideally be the first heading in the source code
5. (…)

Traduction :

Les règles pour les entêtes sont simples :

1. Chaque page doit en avoir au moins une (le H1),
2. Seulement un H1 par page,
3. Le H1 doit être appliqué à l’entête principale de la page,
4. Le H1 devrait idéalement être la première entête dans le code source,
5. (…)

Effectivement, c’est là la façon de penser la plus évidente : je ne mets qu’un seul élément h1 dans ma page, vu que c’est l’élément de structure de degré le plus haut. Cette logique a d’ailleurs été explicité par L. Montaigne sur la liste accessibilité numérique

La logique et l’habitude d’avoir un seul élément en début d’arborescence devrait s’imposer. Je ne vois pas, à ma connaissance, d’arbre avec une racine à deux éléments. Que ce soit un livre (qui a un seul titre), un arbre généalogique (qui démarre d’un seul descendant), une structure XML (qui commence par un seul nœud), une structure HTML (qui commence par une seule balise HTML)…

Pourtant, ce paradigme n’est pas sans soulever quelques questions : j’en veux pour exemple la question qui a valu le début de la controverse sur accesstech : que doit-on mettre dans ce seul et unique Dieu h1 pour éviter les conflits entre ce-dernier et la balise title pour les utilisateurs de lecteurs d’écrans ?

La réponse des standards

Un petit détour dans la DTD XHTML-1.0-Strict ne m’apprend rien : la balise h1 est traitée comme toutes les autres balises entête. À ce niveau donc, il est tout à fait permis d’utiliser plusieurs instances de cette balise… ou de n’en utiliser aucune.

Je me tourne donc du coté de la WAI. Et c’est dans les notes et directives du groupe de travail WCAG 2.0 que je trouve ma réponse officielle :

1. Tant dans les WAI que dans les DTDs officielles, aucune trace de cette règle, bien qu’elle soit pleine de bon sens : il ne s’agit donc pas d’une obligation normative.
2. Ici la réponse n’est pas vraiment précisée, mais une analyse de la formulation d’une des directives donne a penser qu’il peut très bien y avoir plusieurs éléments h1 dans une page : 1. Check the contents of each h1 element.
3. Ce point est sujet à controverse, même si effectivement l’élément h1 désigne nécessairement un élément de structure de niveau un.
4. A ce sujet, bien que cela soit idéalement vrai, une note du 12 novembre 2008 et son brouillon du 03 novembre 2008 affirment que dans les cas où le contenu principal d’un document ne sont pas les premiers éléments du code source, le premier élément h1 peut se trouver plus loin (exemple d’un site en colonnes).

Pour appuyer ces conclusions, on peux remarquer que les brouillons de la norme XHTML 2.0 font plusieurs fois états de plusieurs entêtes de niveau 1 dans un seul document, donnant à cet élément le sens de titre de section, et non seulement titre de page.

Agissez comme bon vous semble

Pour ma part, j’ai tendance à n’utiliser qu’un seul élément h1, mais il est vrai que dans certains cas, sa duplication facilite le travail et permet de rendre le document plus intelligible.

Agissons donc avec réflexion, utilisant un seul élément h1 quand il n’y a pas besoin de plus, et plusieurs quand c’est nécessaire. (Et par pitié pour ceux qui utilisent un lecteur d’écran, proposons un contenu différent pour la balise title et les entêtes ! )

Et vous ?

Qu’en pensez-vous ? Comment structurez-vous vos documents XHTML ? Quelles sont, selon vous, les bonnes pratiques ?