Death of the Heading Group (hgroup) Tag

In the “Working with the new elements” section of Chapter 14 of HTML5 Programming with JavaScript For Dummies I briefly mention the <hgroup> tag. The purpose of this tag is good enough; it lets you group content together to form a heading from multiple elements. I had noted during my research that the tag is supported by a number of browsers but no one seems very enthusiastic about it. In fact, the tag is now dead and you should avoid using it.

Fortunately, there are some methods to work around the support the <hgroup> tag. The main workaround is to use the <header> tag instead. In fact, the presence of the <header> tag makes me wonder why anyone thought the <hgroup> tag was needed in the first place. In order to group elements using the <header> tag, you simply place them inside the tag like this:

<header>
   <h1>Section Title</h1>
   <p>Last Modified:
      <time datetime="2013-07-31">31 March 2013</time>
   </p>
</header>

In this case, you see a section title that also provides a date of last modification. The two items are obviously related (even though you may want to format them differently), so you want to group them on the page. Creating a group will help users interact with the page more easily and also reduce the work required to render the page for those with special needs. The <header> tag performs this task quite easily. You can then use CSS to format the information in any way needed so the viewer can easily distinguish the various kind so information.

The bottom line is that the <hgroup> tag is gone and you should forget it even appears in my book. Let me know your thoughts out repetitive or unneeded tags at John@JohnMuellerBooks.com. You should also contact me if you have any questions about using the <header> tag.