Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.
L'élément HTML <hgroup> représente un titre de plusieurs niveaux pour une section d'une document. Il regroupe un ensemble d'éléments <h1>–<h6>.
| Catégories de contenu | Contenu de flux, contenu de titre, contenu tangible. |
|---|---|
| Contenu autorisé | Un ou plusieurs éléments <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. |
| Omission de balise | Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires |
| Parents autorisés | Tout élément qui accepte du contenu de flux. |
| Rôles ARIA autorisés | tab, presentation |
| Interface DOM | HTMLElement |
Attributs
Cet élément inclut uniquement les attributs universels.
Notes d'utilisation
Note : l'élement <hgroup> a été retiré de la spécification HTML5 (W3C) mais est toujours inscrit dans la version WHATWG de HTML. Il est partiellement implémenté dans la plupart des navigateurs et à ce titre, il est peu probable qu'il disparaisse.
Cependant, le but d'un élément <hgroup> est d'affecter la façon dont les titres sont affichés par l'algorithme de mise en plan défini dans la spécification HTML. Cet algorithme n'est pas implémenté dans la plupart des navigateurs et la sémantique de l'élément <hgroup> est donc uniquement théorique.
La spécification HTML5 (W3C) fournit quelques indications pour baliser les sous-titres et les titres alternatifs sans requérir à <hgroup>.
L'élément <hgroup> permet de regrouper le titre principal d'une section avec son (ou ses) sous-titre(s) afin d'obtenir un titre sur plusieurs niveaux sémantiques.
Autrement dit, l'élément <hgroup> évite que l'utilisation d'éléments <h1>–<h6> secondaires crée différentes sections dans le plan (ce qui est le résultat obtenu normalement lorsque <h1>–<h6> sont utilisés hors d'un <hgroup>).
Dans le plan d'un document, obtenu par l'algorithme défini dans la spécification HTML, l'élément <hgroup> forme une seule entité logique contenant l'ensemble des éléments-fils <h1>–<h6> du <hgroup> et qui fait donc apparaître une seule section pour ce groupe de titres dans le plan.
Pour afficher le contenu d'un tel titre, l'agent utilisateur doit choisir comment représenter l'élément <hgroup> afin d'exprimer notamment les différents niveaux. Voici quelques exemples des approches qui seraient possibles :
- Un élément
<hgroup>peut afficher un titre où les deux points (:) sont utilisés comme séparateur entre le titre principal et le premier titre secondaire - Un élément
<hgroup>peut afficher le titre principal, suivi du/des titre(s) secondaires entre parenthèses
Prenons ce document HTML par exemple :
<!DOCTYPE html>
<title>HTML Standard</title>
<body>
<hgroup id="document-title">
<h1>HTML</h1>
<h2>Living Standard — Last Updated 12 August 2016</h2>
</hgroup>
<p>Some intro to the document.</p>
<h2>Table of contents</h2>
<ol id=toc>...</ol>
<h2>First section</h2>
<p>Some intro to the first section.</p>
</body>
Le rendu de ce document pourrait être :
Où on voit que le titre principal est suivi de deux points puis d'un espace avant le titre secondaire, Living Standard — Last Updated 12 August 2016.
On pourrait également avoir cet affichage :
Ici, le titre secondaire est placé entre parenthèses après le titre principal.
Exemples
HTML
<hgroup id="document-title"> <h1>HTML</h1> <h2>Living Standard — dernière mise à jour le 12 août 2016</h2> </hgroup>
Résultat
Spécifications
| Spécification | État | Commentaires |
|---|---|---|
| WHATWG HTML Living Standard La définition de '<hgroup>' dans cette spécification. |
Standard évolutif |
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Support simple | 5 | (Oui) | 4.0 (2.0) | 9.0 | 11.10 | 4.1 |
| Fonctionnalité | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Support simple | 2.2 | (Oui) | 4.0 (2.0) | 9.0 | 11.0 | 5.0 |