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?

Oquassa

What problem can you solve with hgroup that you can't solve as easily without ? Can you make this question more concrete ? – Whoso

@dystroy I've edited the question to add my current thoughts to hopefully clarify the question. Thanks – Oquassa

What is wrong with what you have? That is how you are supposed to create headings and subheadings. The hgroup tag was just to wrap around them to show they were related. You could do the same with a normal div. – Entrenchment

@jimjimmy1995 but would search engines recognise them two headings as grouped with just a div surrounding them? I thought divs were meaningless to search engines. They are just hooks for css I thought. – Oquassa

@DarrenReay How do you think they did it before the hgroup tag? – Entrenchment

@DarrenReay Are hgroup tags meaningful to search engines? I kinda doubt it. – Dishonorable

@juhana I thought the reason for these tags were to give meaning to content for computers. – Oquassa

That's right, but that doesn't mean all of them are meaningful for every computer. – Dishonorable

According to Steve Faulkner's research, <div> and <p> are more commonly used for a tagline/subheading than an <h?> element. Use one of those two. – Jauregui

FWIW, the use case for <hgroup> was to hide <h?> elements from the document outline when they were being (mis)used to augment a higher level heading rather than to introduce a subsection. – Jauregui

@Jauregui yeah, your right I've read that it is used to hide the additional h tag. The hgroup made sense whereas having just a very short p tag after a heading is very strange as you wouldn't type a word document out and have a very short paragraph consisting of a couple of words after the heading. Even having another h tag is also a little strange as it gives a sub heading more value then the headings that appear after it. It is something I think they need to sort out for the future. – Oquassa

I can see <hgroup> in the spec: html.spec.whatwg.org/multipage/sections.html#the-hgroup-element – Nydia

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.

Dishonorable

Yeah, I think the question is a little vague. I've only ever used h tags within the hgroup. So from what I gather from your answer browsers will still recognise hgroup for now and until a new tag is released for subheading the code is semantically correct? – Oquassa

Now that I read the discussion you linked to, it specifically says that they consider removing it from the specification because no browser has implemented it. So you're pretty safe. It's very unlikely that they'd come up with a new tag to replace it, because <h2> already means a subheading. – Dishonorable

Answer 2

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

Aten

Thanks for the link. Pretty much what I thought. I would give you a plus 1 if I could :( – Oquassa

New link: w3c.github.io/html/… – Brennen

What??? I see nothing on that linked page about subheadings, nor subtitles, nor alternative titles, nor taglines. – Hanker

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.

Batman

What should we use for substituting <hgroup> inside the <header> element (e.g.: for site title)? Can a <header> be inside a <header>> – Flyte

Answer 4

It's 2022 and I see hgroup is present in the spec:
https://html.spec.whatwg.org/multipage/sections.html#the-hgroup-element

Looks like hgroup is acclaimed again, but that's kinda strange. It was in the spec, then it disappeared, and now it's back again...

On the other hand, https://validator.w3.org/ complains about the following code

<!DOCTYPE html>
<html lang="en">
<title>Title</title>
<hgroup>
  <h2>Heading</h2>
  <p>Subheading</p>
</hgroup>
</html>

Content model for element hgroup: Zero or more p elements, followed by one h1, h2, h3, h4, h5, or h6 element, followed by zero or more p elements, optionally intermixed with script-supporting elements.

But it behaves like it's broken because there are exactly zero p elements, followed by one h2 element, followed by zero or more p elements.

And on top of that, MDN says hgroup is supported by every browser:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup

At the same time MDN says to avoid using hgroup because it does not work properly with assistive technologies:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#heading_content

I'm posting an answer, but I can't stop myself from asking the question:
why there's such a mess with hgroup?

Frady

Replying to this with an update since this is the top answer when sorting by "trending". It's 2024 and that warning to avoid using hgroup has disappeared from MDN's page. Furthermore, they clearly state that it MUST contain a SINGLE heading element and ONE OR MORE <p> elements (and only <p> elements). This directly conflicts with other resources such as W3.org's example, which uses two headings inside hgroup and no paragraphs. – Amongst

Answer 5

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.)

Childe