--- title:
slug: Web/HTML/Element/hgroup tags: - Element - HTML - Reference - Web translation_of: Web/HTML/Element/hgroup ---
{{HTMLRef}}

L'élément HTML <hgroup> représente un titre de plusieurs niveaux pour une section d'un document. Il regroupe un ensemble d'éléments <h1>–<h6>.

{{EmbedInteractiveExample("pages/tabbed/hgroup.html", "tabbed-standard")}}

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 :

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

{{EmbedLiveSample("Exemples")}}

Résumé technique

Catégories de contenu Contenu de flux, contenu de titre, contenu tangible.
Contenu autorisé Un ou plusieurs éléments {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}.
Omission de balise {{no_tag_omission}}
Parents autorisés Tout élément qui accepte du contenu de flux.
Rôles ARIA autorisés {{ARIARole("tab")}}, {{ARIARole("presentation")}}
Interface DOM {{domxref("HTMLElement")}}

Spécifications

Spécification État Commentaires
{{SpecName('HTML WHATWG', 'semantics.html#the-hgroup-element', '<hgroup>')}} {{Spec2('HTML WHATWG')}}  

Compatibilité des navigateurs

{{Compat("html.elements.hgroup")}}

Voir aussi