HGROUP element removed from the HTML5 Specification. What alternative technique can be used instead?

Question

As some of you would of heard the hgroup element is being removed from the HTML5 Specification. (For more info, see the W3C HTML Working Group's decision on request to drop hgroup from HTML5 on the W3C's Public Mailing List archives.)

Now I'm currently working on the redesign of a site using this tag that creates a way of adding a sub heading.

My current thoughts are to just add another hX tag under the main header, but I'm not sure if this would be semantic enough to do so.

 <h1>Darren Reay</h1>
 <h2>A developing web developer</h2>
 <p>Hello World</p>

Could anyone either come up with a alternative for using sub headers or at least point me in the right direction?

Answer 1

A couple of points to consider:

1. Even if the tag is removed from the HTML5 specification, it doesn't mean that it would stop working overnight. Browsers keep backwards compatibility for a long time (AFAIK most if not all browsers still render <font> correctly!)

2. Even if the browsers would drop support overnight, they'd still render the page correctly because I don't think the hgroup tag adds any inherent styling and (modern) browsers are very lenient in allowing tags they don't recognize.

3. I might be reading the question wrong, but between the lines it sounds like you've been misusing the hgroup tag anyway. (It's not allowed to contain anything other than header elements.)

I don't see any problem in either dropping the tags completely or replacing them with divs.

Answer 2

The HTML5 spec now includes advice on how to mark up Subheadings, subtitles, alternative titles and taglines

Answer 3

I would go with the alternative suggested by the W3C in the drop hgroup change proposal proposed by Lars Gunther and use header and paragraph.

Your example would look like this

<header>
    <h1>Darren Reay</h1>
    <p>A developing web developer</p>
</header>

I feel this reads correctly and semantically.

Answer 4

This is the technique that I currently use on my personal site to achieve the effect of having a heading with a sub-title:

<header>
  <h1>
    <a href="http://www.jdclark.org/">Jordan Clark</a>
    <small>Personal and Professional Website</small>
  </h1>
</header>

(Then, of course, I simply use CSS to re-style the <small> element. I also personally believe that my technique is more semantically accurate than just using a paragraph -- and although I am no SEO expert, I am sure that by keeping the sub-title text within the h1 would give it higher value than a basic paragraph.)