HTML Group Headings

HTML group headings were introduced in HTML5 to group a set of h1-h6 heading elements. When used correctly, the hGroup element can improve the accessibility and semantics of your heading structure. In this blog post, we’ll cover how to use the hGroup element and some of the benefits of doing so.

One of the most common questions we get asked here at Riddle is how to group headings in HTML. The answer is actually quite simple: use the hGroup element.

What is the hGroup element?

The hGroup element is a specialized container element that is used to group together headings (h1-h6) elements. By grouping headings together, you can more easily control their overall appearance on the page. One common use for the hGroup element is to create a “page title” heading that is different from the rest of the headings on the page.

For example, you may want the page title to be larger and in a different color than the rest of the headings.

Another common use for the hGroup element is to create a “sub-heading” that is different from the rest of the headings on the page. For example, you may want the sub-heading to be smaller and in a different color than the rest of the headings.

The benefits of using the hGroup element

For example, a document heading could be marked up like this:

<h1>American Airlines</h1>
<h2>Doing What We Do Best</h2>

The <hgroup> element is useful for grouping together a heading and subheading while maintaining a correctly sequenced outline. This can be helpful when all subsequent headings need to be a certain tag, like below.

<hgroup>
  <h1>American Airlines</h1>
  <h2>Doing What We Do Best</h2>
</hgroup>

How to use the hGroup element?

A document can have multiple <hgroup> sections, and each <hgroup> can include headings from <h1> to <h6>.

The <header> and <hgroup> tags can be used to enclose a heading element, along with other introductory items such as a banner, logo, or table of contents.

hGroup examples

Find the steps to add HTML group Headings

1. Create an HTML document – (Tutorial)

2. Within the body section, insert the main document heading that includes a banner image

<header>
   <img src="header-banner.png" width="500" height="72" alt="Banner">
   <hgroup>
     <h1>HTML</h1>
     <h2>Building better websites</h2>
   </hgroup>
</header>

Note: <header> elements cannot be nested one within another.

3. Next, within the body section, insert a topic and article

<hgroup>
  <h2>Topic Heading</h2>
  <h3>Article Heading</h3>
</hgroup>
<p> Article Content...</p>

4. Now, within the body section, insert a second topic with a single article

<hgroup>
  <h1>CSS</h1>
  <h2>Cascading Style Sheets</h2>
  <h3>Article Heading</h3>
</hgroup>
<p>Article content...</p>

5. Save the HTML document then open it in your web browser to see the grouped headings and document header

Note: The <hgroup> element is used to group headings <h1> to <h6>. The <header> element can be used to group headings and additional items.

Try it Yourself:

See the Pen HTML Group headings by w3tweaks (@w3tweaks) on CodePen.

Conclusion

The <hgroup> element is a helpful tool for grouping heading elements and improving the accessibility and semantics of your HTML. When used correctly, the <hgroup> element can improve the usability of your website.

HTML Group headings