Is this a bug?
No, this is expected behaviour which is followed by most browsers including Edge, Internet Explorer, Opera, Chrome and Firefox.
To somewhat confirm this there has been a bug report raised about the behviour for Firefox which has been closed with the status Wontfix, likely due to the following reason:
Long story short: I suggest to change the status of this issue to wontfix as it complies with one of the more convoluted standards of html5 as it is.
https://bugzilla.mozilla.org/show_bug.cgi?id=1424001
Why is this happening?
Originally browsers were likely abiding by the following W3C guidance:
Sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section's nesting level.
Authors are also encouraged to explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content.
https://www.w3.org/TR/2011/WD-html5-author-20110809/headings-and-sections.html
The following examples are provided alongside this guidance, all of which at (at the time) were valid:
Example 1
<h4>Apples</h4>
<p>Apples are fruit.</p>
<section>
<h2>Taste</h2>
<p>They taste lovely.</p>
<h6>Sweet</h6>
<p>Red apples are sweeter than green ones.</p>
<h1>Color</h1>
<p>Apples come in various colors.</p>
</section>
This is the least ideal version as the markup makes it difficult to ascertain which heading should have the most prominence and it fails to follow the guide lines outlined above.
Example 2
<h1>Apples</h1>
<p>Apples are fruit.</p>
<section>
<h2>Taste</h2>
<p>They taste lovely.</p>
<section>
<h3>Sweet</h3>
<p>Red apples are sweeter than green ones.</p>
</section>
</section>
<section>
<h2>Color</h2>
<p>Apples come in various colors.</p>
</section>
This version makes it a lot easier to see the heading hierarchy and follows both points of guidance.
Example 3
<h1>Apples</h1>
<p>Apples are fruit.</p>
<section>
<h1>Taste</h1>
<p>They taste lovely.</p>
<section>
<h1>Sweet</h1>
<p>Red apples are sweeter than green ones.</p>
</section>
</section>
<section>
<h1>Color</h1>
<p>Apples come in various colors.</p>
</section>
This version also makes it a lot easier to see the heading hierarchy and follows both points of guidance.
You should notice that both example 2 and example 3 look the same despite using different heading elements, this is because both examples follow the guidance, are equally valid and convey the same heading hierarchy.
However
The guidance on how to head sectioning content has changed in more recent drafts:
Sections may contain headings of a rank equal to their section nesting level. Authors should use headings of the appropriate rank for the section’s nesting level.
https://www.w3.org/TR/html53/sections.html#headings-and-sections
This guidance suggests that of the examples provided above example 2 is the correct way to markup the data.
Given this it seems logical that:
- This functionality was implemented due to the original guidance
- The new guidance suggests that a
h1 element would not be an appropriate heading in sectioning content as they would be set in the sectioning root, however, in the situations where it has been used it will be styled to fit the heading matching the nesting level
Sectioning content elements are always considered subsections of their nearest ancestor sectioning root or their nearest ancestor element of sectioning content
https://www.w3.org/TR/html53/sections.html#headings-and-sections
Summary
This is expected behviour due to there originally being multiple ways of conveying the heading hierarchy when headings are nested in sectioning content such as article and section. The same rules are now used to ensure the headings reflect the appropriate rank of the nested section.
