<hgroup>
Regroupe un titre avec un sous-titre, un slogan ou un surtitre.
- Affichage
- block
- Balise fermante
- Obligatoire
- Contenu autorisé
- Un titre
<h1>-<h6>et des éléments<p>avant ou après lui
Exemple
#<hgroup>
<h1>CodeWorlds</h1>
<p>Apprenez à coder comme dans un jeu d’aventure</p>
</hgroup>Définition et utilisation
#L’élément <hgroup> regroupe un titre avec le texte qui l’accompagne : le sous-titre d’un livre, le slogan d’un site, ou un surtitre du type « Module 3 · Leçon 5 ». Vous y placez exactement un titre <h1>-<h6>, ainsi qu’un ou plusieurs paragraphes <p> avant ou après lui.
<hgroup> regroupait autrefois plusieurs titres, par exemple <h1> et <h2>. La norme a changé cela : le sous-titre s’écrit maintenant dans un <p>, pour ne pas encombrer le plan des titres de la page. Si vous tombez sur un tutoriel avec deux titres à l’intérieur de <hgroup>, ce conseil est désormais dépassé.
Les lecteurs d’écran traitent le sous-titre comme un simple paragraphe, et seul le véritable titre apparaît dans le plan des titres. L’élément lui-même n’a aucune apparence particulière, donc en CSS, on donne généralement au sous-titre une police plus petite et une couleur atténuée.
Syntaxe
#<hgroup>
<h1>Titre</h1>
<p>Sous-titre</p>
</hgroup>Attributs
#Cet élément n’a pas d’attributs propres. Il accepte les attributs globaux, comme class, id ou hidden.
Plus d’exemples
#<hgroup>
<p style="margin: 0; font-size: 0.85rem; color: #f97316;">Module 3 · Leçon 5</p>
<h2 style="margin-top: 4px;">Les boucles et la répétition de code</h2>
</hgroup>CSS par défaut
#La plupart des navigateurs affichent cet élément avec ces styles par défaut :
hgroup {
display: block;
}Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Écrivez le sous-titre dans un
<p>, pas dans un autre titre. - N’enveloppez pas dans
<hgroup>un titre seul, sans sous-titre. Cela n’apporte rien. - Stylisez le sous-titre pour qu’il paraisse clairement secondaire, par exemple avec une police plus petite et une couleur atténuée.
Entrées associées
#- <h1>-<h6>Des titres à six niveaux, du plus important h1 au moins important h6. Ensemble, ils forment le plan de la page.
- <header>L’introduction d’une page ou d’une section : logo, titre, navigation, informations sur l’auteur.
- <p>Un paragraphe de texte.
- <section>Une partie thématique d’un document, généralement avec son propre titre.
- <article>Un contenu autonome qui garde son sens une fois lu ou partagé séparément.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.