HTML5 <hgroup> Tag

The HTML <hgroup> tag is used to represent a multi-level heading for a section of a document. It groups a set of <h1><h6> elements.

The only content permitted inside this element is one or more <h1>, <h2>, <h3>, <h4>, <h5>, and/or <h6>. Both the starting and ending tag are mandatory for this element. The parent of the <hgroup> tag can be any element that accepts flow content.

The <hgroup> element prevents any of its secondary <h1><h6> children from creating separate sections of their own in the outline like those <h1><h6> elements otherwise normally would if they were not children of any <hgroup>.

The <hgroup> element has been removed from the HTML5 (W3C) specification, but it is still present in the WHATWG version of HTML. It is partially implemented in most browsers, though, so is unlikely to go away.

The following style is applied to this element by default:

hgroup {
  display: block;

Here is an example of using this tag:

  <h1>A Big Main Heading</h1>
  <h2>A Related Subheading</h2>


This element only accepts global attributes.


See the Pen HTML hgroup Tag by Tutorialio (@tutorialio) on CodePen.

Further Reading

  1. Read more about the HTML <hgroup> element on MDN.
  2. You can also read the HTML <hgroup> tag reference on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

Go To Top