HTML <hgroup> Heading Group Tag

If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

The <hgroup> Tag in HTML 5

The <hgroup> tag is one of the heading tags in HTML.

Only one of the heading tags in an hgroup element contributes to the current section outline, namely the highest level (<h1> before <h2>, etc.) heading and then the first one of those if there is more than one heading with the same level heading tag.

Level	HTML Code	Level	HTML Code
Level 1	<hgroup> <h1>... outline heading ...</h1> <h2>... additional heading ...</h2> ... </hgroup>	Level 4	<hgroup> <h4>... outline heading ...</h4> <h5>... additional heading ...</h5> ... </hgroup>
Level 2	<hgroup> <h2>... outline heading ...</h2> <h3>... additional heading ...</h3> ... </hgroup>	Level 5	<hgroup> <h5>... outline heading ...</h5> <h6>... additional heading ...</h6> ... </hgroup>
Level 3	<hgroup> <h3>... outline heading ...</h3> <h4>... additional heading ...</h4> ... </hgroup>	Level 6	<hgroup> <h6>... outline heading ...</h6> <h6>... additional heading ...</h6> ... </hgroup>

<hgroup> Tag Syntax

Rules for coding HTML `hgroup` elements

<body>
   ...
   ... flow content expected ...
   <hgroup>
      <hn>... phrasing content ...</hn>
      ...
   </hgroup>
   ...
</body>

Inside an element where flow content is allowed, code one or more optional hgroup elements.
Begin each hgroup element with a starting <hgroup> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
Include any HTML global attributes on the <hgroup> tag as appropriate.
End the element with a matching </hgroup> closing tag.
Inside the heading element, code one or more HTML heading tags.

<aside> Content Model

Content of the <aside> Tag

The inner HTML of the hgroup element is restricted to HTML comments and only the HTML heading tags.

<hgroup> Tag Attributes

Attributes of the <hgroup> tag

global attributes

The only attributes that can be coded on the <hgroup> tag are the common HTML attributes.

<hgroup> Heading Group Tag Examples

Examples of the `hgroup` tag in HTML 5

Clear after a floating image so headings do not flow around it

You can float an image with style="float: left" or style="float: right" then follow it with headings. If you try to position the headings below the image with style="clear: both", some browsers (Chrome, Safari) will move the headings below the image while other browsers (Firefox, Opera) will flow the headings around the image. For example:

<img src="/images/mathml.png" alt="" style="float: left; border: 1px solid gray; padding: 6px"/>
<p>This is the text that flows to the right of the floating image.</p>
<hgroup style="clear: both">
   <h3>This Is A Heading That Should Appear After The Image</h3>
   <h4>It Is Followed By Another Heading That Is Just A Little Longer</h4>
</hgroup>

View this in Firefox or Opera to see what happens:

This is the text that flows to the right of the floating image.

This Is A Heading That Should Appear After The Image

It Is Followed By Another Heading That Is Just A Little Longer

To make it look consistent in all browsers, code display: block in the style attribute to make sure the element with the clear: both style is rendered as a block element. Now that the position of the headings is correct, code a text-align: center style to center the headings if desired.

<img src="/images/mathml.png" alt="" style="float: left; border: 1px solid gray; padding: 6px"/>
<p>This is the text that flows to the right of the floating image.</p>
<hgroup style="display: block; clear: both; text-align: center">
   <h3>This Is A Heading That Should Appear After The Image</h3>
   <h4>It Is Followed By Another Heading That Is Just A Little Longer</h4>
</hgroup>

This is the text that flows to the right of the floating image.

This Is A Heading That Should Appear After The Image

It Is Followed By Another Heading That Is Just A Little Longer

Of course the styles can be put into a CSS Style Sheet, possibly with a class selector.

Changes in HTML 5 - <hgroup> Tag

What's new in HTML 5

The <hgroup> tag is one of the new elements in HTML 5.

Differences between HTML 5 and earlier versions of HTML

The <hgroup> tag did not exist in older versions of HTML.

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the names of all HTML element types, which now includes the hgroup element name. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.

Valid HTML 5