<hgroup> is rendering only one of its element in Outlining algorithm(HTML5)

Question

<hgroup> is rendering only one of its element in Outlining algorithm(HTML5)

114 Views Asked by Ant's At 06 April 2025 at 07:41

I'm new to HTML5 and I read the outlining concept and I understood. I tried part of code in this site(to outline my code) :

<!DOCTYPE html>
<article>
  <hgroup>
    <h1>H1</h1>
    <h2>H2</h2>
    <h3>H3</h3>
  </hgroup>
</article>

But the result I am getting is confusing me. I'm getting the following result :

1.Untitled Section
    1.H1

I know the reason why I'm getting 1.Untitled Section in my output, but where does my this part of code gone

<h2>H2</h2>
<h3>H3</h3>

I couldn't see H2 and H3 in my output. What is the reason for it? Explain with an example.

Thanks in advance.

Original Q&A

There are 3 best solutions below

Nico On 05 January 2012 at 11:09

I was reading a HTML5 book the other day, and if I remember correctly, the HTML5 group element only creates an outline for the first header (bounding box).

Edit: As Pointed out by Paul in the comments, it is explained here quite well:

http://diveintohtml5.info/semantics.html#header-element

ferosekhanj On 05 January 2012 at 11:23

The h1 h2 h3 was used to create sections in HTML4.0 and prior versions. From HTML 5 that is not the case. It has better mark up for the sections now like section,article,nav etc., The meaning of h1,h2,h3 now is nothing but a header and sub headers inside these markups. The hgroup was created to filter out the sub headers and taglines created using h2,h3 etc., from polluting the outline. so what you are seeing is intended. If you remove the hgroup you would see all of them.

**devdigital** · Accepted Answer

An hgroup only includes the (first) highest level heading in the outline.

From http://dev.w3.org/html5/spec/the-hgroup-element.html

For the purposes of document summaries, outlines, and the like, the text of hgroup elements is defined to be the text of the highest ranked h1–h6 element descendant of the hgroup element, if there are any such elements, and the first such element if there are multiple elements with that rank. If there are no such elements, then the text of the hgroup element is the empty string.

The point of using hgroup is to actually mask out the subsequent headers from the outline. So the behavior you are seeing is the reason for the existence of the element.

<hgroup> is rendering only one of its element in Outlining algorithm(HTML5)

There are 3 best solutions below

Related Questions in HTML

Related Questions in OUTLINING

Trending Questions

Popular # Hahtags

Popular Questions