Balise HTML `<hgroup>`

La balise <hgroup> est utilisée pour regrouper des titres HTML. Nous utilisons <hgroup> pour envelopper un ou plusieurs éléments de titre parmi <h1> - <h6>.

La balise <hgroup> permet de regrouper le titre principal avec des titres secondaires, formant ainsi un titre à plusieurs niveaux. Elle empêche tout enfant secondaire <h1> - <h6> de créer ses propres sections séparées.

Dans le plan abstrait, <hgroup> forme un seul titre logique, avec un ensemble global d’enfants <h1> - <h6> qui entrent dans le plan comme une unité à plusieurs niveaux. Un élément <hgroup> peut être affiché dans un plan rendu de plusieurs façons :

Il peut être affiché avec un deux-points et un espace, ou une autre ponctuation, après le titre principal et avant le premier titre secondaire.
Il peut être affiché avec le titre principal, suivi des titres secondaires entre parenthèses.

DANGER

<hgroup> n’est pas pris en charge dans HTML5, mais il est pris en charge dans la spécification WHATWG Living Standard. L’avenir de cet élément n’est pas encore clair, c’est pourquoi il vaut mieux éviter d’utiliser cette balise.

Syntaxe

La balise <hgroup> s’utilise par paire. Cependant, la balise de fermeture n’est pas requise.

Exemple de la balise HTML `<hgroup>` :

Exemple de la balise HTML <hgroup>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <hgroup>
      <h1>Welcome to W3Docs</h1>
      <h2>Here you can learn HTML Bases.</h2>
    </hgroup>
  </body>
</html>

Try it Yourself »

Résultat

hgroup tag example

Exemple de la balise HTML `<hgroup>` utilisée avec des propriétés CSS :

Exemple de la balise HTML <hgroup> avec les propriétés CSS :

html

<!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;
      }
      h2 {
        font-size: 20px;
      }
      p {
        font-family: Arial, sans-serif;
        font-size: 16px;
        line-height: 1.5;
      }
    </style>
  </head>
  <body>
    <hgroup>
      <h1>Welcome to W3Docs</h1>
      <h2>Learn online</h2>
    </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>

Try it Yourself »

Attributs

La balise <hgroup> prend en charge les attributs globaux.

Comment styliser une balise HTML <hgroup>

json

{
    "tag_name": "hgroup"
}

Practice

What is the primary purpose of the HTML <hgroup> tag?

To create a hyperlinkTo group a set of <h1>–<h6> elements when the heading has multiple levels.To embed multimedia contentTo define a header for a document or sectionTo downplay the importance of the lower ranked header

Balise HTML <hgroup> ​

Syntaxe ​

Exemple de la balise HTML <hgroup> : ​

Résultat ​

Exemple de la balise HTML <hgroup> utilisée avec des propriétés CSS : ​

Attributs ​