What is hgroup element in html?

Grouping Headings with the <hgroup> Element

The hgroup element, introduced in HTML5, was designed to group together a set of one or more <h1> through <h6> elements when a heading had multiple levels, such as a main title and a subtitle, alternative titles, or taglines. The purpose was to treat these related headings as a single heading unit.

For example, if you had a main title and a subtitle, you could wrap them in an <hgroup>:

<hgroup>
  <h1>My Weblog</h1>
  <h2>A lot of effort went into making this effortless.</h2>
</hgroup>

In this example, the <h1> “My Weblog” is the main heading, and the <h2> “A lot of effort went into making this effortless.” is a subtitle or tagline.

Understanding When and Why to Use <hgroup> to Modify the Document Outline

The primary reason for using <hgroup> was to influence the HTML5 document outline. The intention was that when multiple heading elements were nested within an <hgroup>, only the first heading element (the highest-ranked one) would be reflected in the document’s outline. Subsequent headings within the <hgroup> were meant to be hidden from the outline.

example:

<section>
  <hgroup>
    <h1>Fruits I Like</h1>
    <h2>How I Learned to Love Citrus</h2>
  </hgroup>
  <p>Some text about fruits...</p>
</section>

The hope was the document outline would only show “Fruits I Like” and not “How I Learned to Love Citrus” as a separate section. This was to prevent subtitles or taglines from creating unwanted additional nodes in the document outline. The position of the <hgroup> in the <h1>-<h6> order was determined by the first heading element child within it.

The Concept of No More hgroup with Code Examples

Its initial introduction in HTML5, the <hgroup> element has had a somewhat raging history. The <hgroup> element has been officially dropped from the W3C’s version of the HTML5 specification due to a lack of beneficial implementation by browser makers and screen readers. However, it still be present in the WHATWG’s version.

Because of the lack of practical implementation, and issues with the document outline itself, authors are now advised to use heading rank (h1-h6) to convey document structure.

The recommended approach to marking up a main heading with a subtitle or tagline, instead of using <hgroup>, is often to include the subtitle or tagline within the main heading element itself, possibly using a <span> element with a specific class for styling:

<header>
  <h2>HTML5 Herald <span class="tagline">Produced With That Good Ol’ Timey HTML5 &amp; CSS3</span></h2>
  <nav>
    <ul>
      <li><a href="#">News</a></li>
      <li><a href="#">Articles</a></li>
    </ul>
  </nav>
</header>

In this revised example, the tagline is associated with the main heading <h1> but can be styled differently using CSS applied to the <span> with the class “tagline”. This approach ensures a clear document outline with a single main heading while still allowing for visual distinction of the subtitle.

While the <hgroup> element was intended to simplify the creation of document outlines when using subtitles, its lack of widespread support has led to it being largely obsolete in current web development practices. You should now depend on the graded structure of <h1> to <h6> elements and potentially use CSS for visual styling of subheadings or taglines. The document outline is now conveyed through the correct nesting and ranking of heading elements within sectioning content elements like <article>, <section>, <nav>, and <aside>.

HTML5 Topics