1. Technology

How to Use the HTML5 HGROUP Element

Learn to Group Your Headers


The HTML5 HGROUP element is used to group headings so that they don’t show up in the HTML5 outline. The idea is that you may have multiple heading elements (H1 through H6), but you don’t want them all displayed in the outline.

For example, You might have a header like this at the top of your web page:

<h1>My Blog</h1>
<h2>Learn More About Me</h2>

If you then were to outline your page, the outline for that section would read:

  1. My Blog
    1. Learn More About Me

If every section on your page has both a main title and a subhead, the outline could get cluttered with a lot of extra elements that don’t contain any extra content. The outline implies that each heading is a section head that will have content associated with it. But a subhead is typically content that further explains the main headline, not an additional section.

This is where the HGROUP element comes in. The HGROUP element allows you to group heading tags so that they do not appear in the outline. Instead they are all grouped together into one section.

If you changed the above HTML to read:

<h1>My Blog</h1>
<h2>Learn More About Me</h1>

This would have the outline:

  1. My Blog

Using the HGROUP Element

The only thing you need to be aware of when using the HGROUP element is that only heading elements can be inside it. You should not include any content outside of the H1H6 elements.

To use this element, simply surround any group of heading elements with the HGROUP element. For example:

<h1>Headline Level 1</h1>
<h2>Headline Level 2</h2>
<h3>Headline Level 3</h3>

As far as design goes, the HGROUP element has no effect on how a web page will look. You can attach styles to an HGROUP if you like, but the unstyled element won’t make any difference to how the headlines inside it display.

How Headings Work in HTML5

The HGROUP element along with the H1H6 elements are all headings in HTML5. The first heading element found in a sectioning element is the heading for that section. Then subsequent headings of the same rank (H1 and H1, H3 and H3, etc.) create new (implied) sections. And headings of a lower rank start implied sections that are part of the upper one.

This is how outlines can be built, even if there are no explicit sectioning elements in the content.

If you have a web page that has no sectioning elements, but it does include heading elements, you can still generate an HTML5 outline with it. For example, this HTML:

<h1>This is the Page Headline</h1>
<h2>My First Article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h3>A Subhead for the Article</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h3>A Second Subhead</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h2>My Second Article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

Will create an outline like this:

  1. This is the Page Headline
    • My First Article
      • A Subhead for the Article
      • A Second Subhead
    • My Second Article

And as you can see, there are no sectioning elements in this HTML at all. This is the same way that HTML 4.01 documents can be outlined.

The HGROUP Element Controversy

There is some controversy surrounding the HGROUP element because some members of the WHATWG and W3C (the people writing the HTML5 standard) do not believe that it is a useful element and would like to have it removed from the specification. If you use the HGROUP element and want to keep your documents valid HTML5, you should pay some attention to the specification, but it’s a good possibility that the element will make it into the final draft. It is part of the working draft as of November 2011, and even with the controversy, I don’t think it will be removed.

©2014 About.com. All rights reserved.