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

StackOverflow https://stackoverflow.com/questions/8741470

  •  14-04-2021
  •  | 
  •  

Question

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.

Was it helpful?

Solution

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.

OTHER TIPS

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

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top