Real-life use of <hgroup>

1

Hi and thanks for reading.
The <hgroup> tag is one of the new elements in HTML 5. Even after reading tutorial at Semantic HTML5 Elements Explained and MDN’s <hgroup> - HTML: HyperText Markup Language | MDN which even says " The <hgroup> presently has no strong accessibility semantics. The content of the element (a heading and optional paragraphs) is what is exposed by browser accessibility APIs."

I do not understand where, or why I should use this.

Does anyone have a real-life example?

Thanks.
– Fred

2

The example on the MDN page is a real-life example. That’s how you would use the hgroup element. It is used to group a heading with some associated text.

Do you have to use it? No. Does it help with accessibility in any way? Not at this time. That could change if assistive tech like screen readers decide to recognize it.

But there are a lot of elements that we use in HTML that don’t provide any benefits for accessibility. For example, the section tag is basically just a div unless you give it an accessible name.

Just a little history. The hgroup tag was originally intended to be used in a slightly different manner to allow browsers to create a standard heading outline for the page regardless if the proper heading levels were used. No browser ever implemented this feature and thus the hgroup element was basically meaningless. But recently they changed the definition of hgroup to what it is now, but it remains to be seen if screen readers and such will ever do anything with it.

1 Like
3

I have never used that element, I don’t even remember seeing it used.

As said, it is used to group the heading element with related content using p elements instead of using other heading elements that would change the document outline.

The element may be used to group an h1–h6 element with one or more p elements containing content representing a subheading, alternative title, or tagline.

Its usage and meaning also seem to have changed. At one point, it (apparently) allowed multiple heading elements and was used to “mask” other heading elements.

4.4.7 The hgroup element — HTML5: Edition for Web Authors

Here are some examples of valid headings. In each case, the emphasized text represents the text that would be used as the heading in an application extracting heading data and ignoring subheadings.

<hgroup>
  <h1>**The reality dysfunction**</h1>
  <h2>Space is not the only void</h2>
</hgroup>

<hgroup>
  <h1>**Dr. Strangelove**</h1>
  <h2>Or: How I Learned to Stop Worrying and Love the Bomb</h2>
</hgroup>

The point of using hgroup in these examples is to mask the h2 element (which acts as a secondary title) from the outline algorithm.

That is now invalid HTML.

Here is something from the current specs.

3.2.1 Semantics

For example, the following snippet, intended to represent the heading of a corporate site, is non-conforming because the second line is not intended to be a heading of a subsection, but merely a subheading or subtitle (a subordinate heading for the same section).

<body>
 <h1>ACME Corporation</h1>
 <h2>The leaders in arbitrary fast delivery since 1920</h2>
 ...

The hgroup element can be used for these kinds of situations:

<body>
 <hgroup>
  <h1>ACME Corporation</h1>
  <p>The leaders in arbitrary fast delivery since 1920</p>
 </hgroup>
 ...
1 Like
4

Thank you, Bruce @bbsmooth and Lassee @lasjorg.

I doubt that I will be using this for a while.

I appreciate your replies.

– Fred

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.