Sur la page d'accueil d'un produit, un grand titre est souvent suivi d'une phrase plus discrète juste en dessous : un slogan, une promesse, parfois le nom d'une offre. La tentation naturelle est d'écrire ce sous-titre dans une seconde balise de titre, un h2 collé sous le h1. Visuellement, le rendu est parfait. Pour un lecteur d'écran qui se déplace de titre en titre, la page annonce pourtant deux titres à la suite là où il n'y en a vraiment qu'un seul.
La balise <hgroup> règle exactement ce problème : elle regroupe un titre et le texte qui l'accompagne dans un seul bloc, pour que le titre principal reste seul dans le plan du document tout en restant visuellement collé à son sous-titre.
Définition
<hgroup> est un conteneur qui rassemble un titre, de <h1> à <h6>, avec le contenu qui lui est directement rattaché : un sous-titre, un slogan, une précision de date ou d'édition. L'idée n'est pas de créer un nouveau niveau de titre, mais de dire au navigateur et aux technologies d'assistance que ce paragraphe fait partie du même bloc que le titre, sans compter comme un titre supplémentaire dans la hiérarchie du document.
Un contenu volontairement restreint
Le modèle de contenu de <hgroup> est strict, et c'est récent : seuls un titre (<h1> à <h6>), des paragraphes, ainsi que les balises techniques <script> et <template> sont autorisés à l'intérieur. Rien d'autre, ni liste, ni image, ni second titre.
Ce n'a pas toujours été le cas. Les premières versions de la norme autorisaient plusieurs titres empilés, un <h1> suivi d'un <h2> par exemple, pour créer un sous-titre qui comptait lui aussi comme un titre secondaire dans un plan imbriqué. L'idée était élégante sur le papier, mais aucun navigateur ni aucun lecteur d'écran ne l'a jamais implémentée de façon cohérente : chacun construisait son propre plan de page, parfois différent d'un outil à l'autre. La norme a fini par trancher en 2022 en limitant <hgroup> à un seul titre, ce qui rend son comportement enfin prévisible partout.
Un exemple concret
Sur une fiche produit, le nom de l'offre et sa promesse tiennent naturellement dans un <hgroup> :
<hgroup>
<h1>Believemy Pro</h1>
<p>L'abonnement qui débloque tous les parcours, sans limite de temps</p>
</hgroup>Un lecteur d'écran annonce ici un seul titre, « Believemy Pro », puis poursuit sa lecture normale avec la phrase qui suit. Dans la liste des titres de la page, un seul élément apparaît, exactement comme le voit un visiteur qui lit la page des yeux.
Ce que retiennent les technologies d'assistance
Seul le titre proprement dit, celui écrit avec <h1> à <h6>, entre dans le plan de navigation par titres. Le paragraphe qui l'accompagne se lit à la suite, comme un texte ordinaire, mais n'apparaît jamais dans la liste des titres qu'un lecteur d'écran propose pour se déplacer rapidement dans la page. C'est exactement le comportement recherché : une seule information de niveau « titre », un sous-titre qui reste lisible sans polluer la navigation.
<hgroup>, une technique répandue consistait à glisser le sous-titre dans une balise <small> imbriquée à l'intérieur du <h1>. Le rendu visuel était correct, mais le sous-titre restait annoncé comme faisant partie du titre lui-même, ce qui brouillait sa lecture par un lecteur d'écran. Cette technique est aujourd'hui abandonnée au profit de <hgroup>, qui sépare clairement les deux rôles.Les deux erreurs les plus fréquentes
La première consiste à vouloir recréer l'ancien comportement en plaçant un second titre à l'intérieur du groupe, par exemple un <h2> sous le <h1>. Ce n'est plus valide : un seul titre est accepté, et les navigateurs récents ignorent ou déplacent le second en dehors du groupe lors de l'analyse de la page.
La seconde erreur est d'utiliser <hgroup> partout, autour de chaque titre de la page, même quand il n'y a rien à regrouper avec lui. Si un titre n'a pas de sous-titre ni de contenu associé, il n'a besoin d'aucun conteneur : un <h1> ou un <h2> seul suffit très bien.
| Élément | Autorisé dans hgroup |
|---|---|
| Un titre, de h1 à h6 | Oui, un seul |
| Un paragraphe (sous-titre, slogan) | Oui, un ou plusieurs |
| Un second titre (h1 à h6) | Non |
| Une image, une liste, un lien | Non |
h1 et un h2, à l'intérieur d'un même hgroup ?Non, plus depuis la révision de 2022 de la norme. Les premières versions le permettaient pour créer un sous-titre qui comptait aussi comme titre secondaire, mais aucun navigateur ne l'a jamais implémenté de façon fiable, si bien que cette possibilité a été retirée. Aujourd'hui, un seul titre est accepté, et le sous-titre doit passer par un paragraphe ordinaire.
Non, il reste parfaitement lu, dans l'ordre, juste après le titre. La seule chose qu'il ne fait pas, c'est apparaître dans la liste des titres qu'un lecteur d'écran propose pour naviguer rapidement d'un titre à l'autre : il se lit comme un paragraphe normal, pas comme un raccourci de navigation.
hgroup pour tous les titres d'une page ?Non, seulement quand un titre s'accompagne réellement d'un sous-titre, d'un slogan ou d'une précision à regrouper avec lui. Un titre isolé, sans texte associé, n'a besoin d'aucun conteneur supplémentaire : il se suffit à lui-même.