<hgroup>

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 :

Rendered outline that includes an <hgroup> element, with parens around the secondary heading

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

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, marie-ototoi, tregagnon, Goofy
 Dernière mise à jour par : SphinxKnight,