<hgroup>

Description

L’élément <hgroup> groupe un titre (<h1>–<h6>) avec les éléments qui lui sont directement associés : sous-titre, tagline, auteur, date. Seul le titre principal contribue à la hiérarchie des titres du document ; les autres éléments du groupe sont traités comme du contenu associé, non comme des niveaux supplémentaires dans l’outline.

Syntaxe

<hgroup>
  <h1>CSS Grid</h1>
  <p>Guide complet pour les développeurs web</p>
</hgroup>

Exemples

En-tête d’article avec sous-titre :

<hgroup>
  <h2>Les nouveautés CSS en 2025</h2>
  <p>Container queries, cascade layers et bien plus encore</p>
</hgroup>

En-tête de page avec auteur :

<hgroup>
  <h1>Histoire du web</h1>
  <p>Par Tim Berners-Lee · 12 avril 2025</p>
</hgroup>

Section avec titre et accroche :

<article>
  <hgroup>
    <h3>Accessibilité web : mythe ou réalité ?</h3>
    <p>Comment les équipes peuvent intégrer l'accessibilité dès la conception.</p>
  </hgroup>
  <p>Le contenu de l'article commence ici…</p>
</article>

Notes

Outline du document : seul le <h1>–<h6> dans le <hgroup> est pris en compte dans la hiérarchie des titres. Les <p> ou autres éléments du groupe n’y apparaissent pas.

<hgroup> vs <header> : <hgroup> est restreint aux titres et leur contenu immédiatement associé. <header> est plus large : il peut contenir un <hgroup>, une navigation, un logo, etc.

Contenu autorisé : un seul élément de titre (<h1>–<h6>), suivi de zéro ou plusieurs <p>. Aucun autre type de titre dans le même groupe.