The **`<hgroup>`** element in HTML is used to display a *multi-level* heading on a webpage. The `<hgroup>` element ensures that the primary heading is *grouped* with the secondary headings, such that the secondary headings do not form their own separate section. For example, `<hgroup>` can be used to display a multi-level heading that includes the title of an article, the author's name, and the byline of the article. The children elements of `<hgroup>` can be any of the `<h1>`-`<h6>` headings.

>NOTE: The `<hgroup>` element is no longer part of the HTML5 standard. It's advised to follow the HTML5 specification to mark up your multi-level headings without using `<hgroup>`.

# Example


<!DOCTYPE html>
<html>
<body>

<header class="shot-header">
  <hgroup>
    <h1>hgroup element</h1>
    <h2>in HTML</h2>
    <h3>by Abdul Monum</h3>
  </hgroup>
</header>
<p>hgroup element displays a multi-level heading.</p>

</body>
</html>


hgroup {
    text-align: center;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    border-right: 6px solid #c9d700;
}

h1 {
    font-size: 2.05rem;
    margin-bottom: 0;
}

h2 {
    font-size: 1.55rem;
    margin-top: 0;
    margin-bottom: 0;
}

h3 {
    font-size: 0.95rem;
    margin-top: 0;
}

p {
    text-align: justify;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: .95rem;
}

codemirror

# Explanation

In lines 6-10, you can observe the `<hgroup>` element and its children `<h1>`-`<h3>` elements that form a multi-level heading of the simple webpage.

What is the <hgroup> element in HTML?

<hgroup> groups headings to prevent separate sections, but it's not in the HTML5 standard.