C'est un élément ambigu parmi d'autres de la nouvelle norme HTML5 : hgroup semble ne pas vouloir se dévoiler.
Si on lit la spécification officielle du W3C (en last call for comment actuellement), on reste un peu sur notre faim :
The hgroup element represents the heading of a section. The element is used to group a set of h1-h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.
For the purposes of document summaries, outlines, and the like, the text of hgroup elements is defined to be the text of the highest ranked h1-h6 element descendant of the hgroup element, if there are any such elements, and the first such element if there are multiple elements with that rank. If there are no such elements, then the text of the hgroup element is the empty string.
Autrement dit, hgroup ne permet pas de faire des tables des matières, mais au contraire d'aider à leur création !
Un minimum d'explications s'impose…
Actuellement, un document HTML sémantique comporte des balises titres : de h1 à h6, h1 indiquant le titre de la page, h2 un sous-titre, et ainsi de suite1.
Enfin, ça c'était dans l'« ancien » modèle xHTML / HTML4, puisque maintenant on peut avoir plusieurs h1 dans un même document sans confusion grâce à l'introduction des éléments article et section. Mais je m'égare.
Donc, à quoi sert un hgroup ? En analysant le terme, on peut penser qu'on va mettre dedans des suites de titres ; par exemple une table des matières :
Table des matières :
La vie des castors
Introduction
Remerciements
Présentation des castors
L'habitat des castors
La rivière
Les pneus de camion
En fait non. Il faut lire attentivement le deuxième paragraphe de la spécification :
For the purposes of document summaries, outlines, and the like, the text of hgroup elements is defined to be the text of the highest ranked h1-h6 element descendant of the hgroup element.
Et finalement, le but devient clair : hgroup permet de mettre des éléments ensemble lorsqu'ils n'ont pas une valeur hiérarchique, mais additive. Mais quel intérêt, me direz-vous ? Les h1~6 sont des éléments pour des titres, un point c'est tout ! On n'a pas à les utiliser autrement !
Vous avez raison, mais vous ne raisonnez pas globalement.
D'ailleurs, je parie que vous utilisez déjà les h1 et h2 dans vos sites sans valeur hiérarchique :
La vie des castors
...ou la passionnante aventure d'une espèce en danger
Et c'est là que vient se placer hgroup.
Si vous utilisez un outil pour générer automatiquement une table des matières (ici par exemple), le hgroup permet de dire « seul le premier élément compte pour établir la structure, le second n'a qu'une valeur de sous titre direct ».
Si on lit la norme plus attentivement, on voit que ce n'est pas forcément le premier élément ; juste celui de plus haut niveau.
Vous pouvez donc écrire le code suivant :
La vie des castors
...ou la passionnante aventure d'une espèce en danger
Introduction
Remerciements
Ce projet n'aurait pas vu le jour sans eux !
Présentation des castors
L'habitat des castors
Leur habitat principal :
La rivière
Les pneus de camion
Et un logiciel sémantique de création de table des matières (comme the outliner) affichera la table des matières suivantes :
- La vie des castors
- Introduction
- Remerciements
- Présentation des castors
- L'habitat des castors
- La rivière
- Les pneus de camion
- Introduction
Alors qu'un logiciel à l'ancienne ne distinguera pas les hx à valeur non-hiérarchique :
- La vie des castors
- ...ou la passionnante aventure d'une espèce en danger
- Introduction
- Remerciements
- Ce projet n'aurait pas vu le jour sans eux !
- Remerciements
- Présentation des castors
- L'habitat des castors
- Leur habitat principal :
- La rivière
- Les pneus de camion
Bref, une balise qui va devenir utile avec le temps ! Et qui ouvre une nouvelle branche de recherche dans le CSS : l'utilisation de counter tenant compte des hgroup. Bon courage :)
- 1 ? Pourquoi s'arrêter à h6 ? Voilà une question intéressante.
