Menu
Problem:
Why do <h1> and <h2> tags have the same font-size when being put inside an <article>?
Output:
Then I thought maybe it's simply my eyes who fool me so I measured it up.
I turned out to be the same size.
I looked at the following link (http://w3c.github.io/html/rendering.html#sections-and-headings) I learned that it is based on hierarchy but <h1> and <h2> are on the same level of hierarchy.
Accordingly, <h1> should be 2em and <h2> should be 1.5em.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Headings</title>
<meta charset="utf-8">
</head>
<body>
<article>
<h1>This is h1.</h1>
<h2>This is h2.</h2>
<h3>This is h3.</h3>
<h4>This is h4.</h4>
<h5>This is h5.</h5>
<h6>This is h6.</h6>
</article>
</body>
</html>
526
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
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:
<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.
<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.
<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.
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:
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 levelSectioning 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
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.
200
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
