La balise HTML <hgroup>
La balise HTML <hgroup> regroupe un titre avec son sous-titre. Apprenez le modèle de contenu, la syntaxe et des exemples avec W3docs.
La balise HTML <hgroup> regroupe un seul titre (l'un des éléments <h1>–<h6>) avec un ou plusieurs éléments <p> qui jouent le rôle de sous-titre, d'accroche ou de titre alternatif. Son rôle est de maintenir ce texte d'accompagnement associé au titre plutôt que d'en faire un élément distinct dans le plan du document.
Par exemple, le titre d'une page et son accroche forment un ensemble cohérent. Sans <hgroup>, vous seriez contraint soit de marquer l'accroche comme un titre de niveau inférieur (encombrant le plan), soit comme un paragraphe ordinaire (perdant l'association visuelle et sémantique). <hgroup> résout ce problème : le titre définit l'entrée dans le plan, et le contenu des <p> lui est rattaché.
<hgroup>
<h1>Welcome to W3Docs</h1>
<p>Learn HTML, CSS, and JavaScript online for free.</p>
</hgroup>Modèle de contenu
C'est le point que la plupart des anciens tutoriels traitent incorrectement. Le <hgroup> actuel ne regroupe pas plusieurs éléments <h1>–<h6> frères. Son modèle de contenu est :
- exactement un élément de titre (
<h1>,<h2>,<h3>,<h4>,<h5>ou<h6>), plus - zéro ou plusieurs éléments
<p>avant et/ou après ce titre.
Les éléments <p> portent le sous-titre, le titre alternatif ou l'accroche. Seul le titre unique contribue au plan de la page ; les paragraphes lui sont associés mais ne créent pas de titres propres.
Statut dans la spécification
L'élément <hgroup> a été retiré de la spécification HTML pendant plusieurs années, c'est pourquoi de nombreuses documentations plus anciennes le signalent comme non pris en charge et déconseillent son utilisation. Ces conseils sont dépassés : <hgroup> a été rétabli dans le standard de référence HTML du WHATWG en 2022 avec le modèle de contenu simplifié (titre plus paragraphes) décrit ci-dessus. Il s'agit d'un élément valide aujourd'hui.
<hgroup> est un élément valide dans le standard de référence HTML du WHATWG actuel (rétabli en 2022). Tous les navigateurs modernes affichent correctement son contenu. Notez qu'il n'a pas de sémantique d'accessibilité intégrée particulière — les technologies d'assistance exposent le titre qu'il contient comme un titre ordinaire, et les éléments <p> comme du texte standard.
Syntaxe
La balise <hgroup> fonctionne par paires : la balise ouvrante <hgroup> et la balise fermante </hgroup> sont toutes deux obligatoires.
Exemple de la balise HTML <hgroup>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<hgroup>
<h1>Welcome to W3Docs</h1>
<p>Here you can learn the HTML basics.</p>
</hgroup>
</body>
</html>Exemple de la balise HTML <hgroup> utilisée avec des propriétés CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hgroup {
text-align: right;
font-family: Arial, sans-serif;
padding-right: 30px;
border-right: 15px solid #42c73a;
}
h1 {
font-size: 30px;
}
hgroup p {
margin: 0;
font-size: 18px;
color: #555;
}
p {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<hgroup>
<h1>Welcome to W3Docs</h1>
<p>Learn online</p>
</hgroup>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</body>
</html>Attributs
La balise <hgroup> ne possède pas d'attributs spécifiques à l'élément. Elle prend en charge les attributs globaux et les attributs d'événements standard.
Compatibilité des navigateurs
<hgroup> est pris en charge par tous les navigateurs modernes — Chrome, Firefox, Safari et Edge — et fait partie du standard de référence HTML du WHATWG actuel. Comme il ne possède aucun style par défaut au-delà du fait d'être un conteneur de bloc, la compatibilité signifie concrètement que le navigateur affiche le titre et ses paragraphes comme prévu.
Balises associées
- Balise HTML
<header>— contenu d'introduction d'une page ou d'une section, où un bloc de titre<hgroup>est souvent placé. - Balises HTML
<h1>–<h6>— les éléments de titre que vous placez à l'intérieur de<hgroup>. - Titres HTML — vue d'ensemble de la manière dont les titres structurent le document.