15

Problem:

Why do <h1> and <h2> tags have the same font-size when being put inside an <article>?

Output:

enter image description here

Then I thought maybe it's simply my eyes who fool me so I measured it up.

enter image description here

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>
3
  • 3
    Instead of measuring letters you can check "computed styles" in your browser's console.
    – Ivan
    Sep 17, 2016 at 14:17
  • @Lends Excellent suggestion, thank you.
    – kexxcream
    Sep 18, 2016 at 8:23
  • 1
    The specs you linked says that x h1 should have a font-size of 1.5 em and x hgroup > h1 ~ h2 should have font-size of 1.17 em (where x is either <article>, <aside>, <nav>, and <section>. I think the browsers only implemented the h1-in-article part but not the h2-in-article part of the specs (+ the rest) which is why their sizes are the same in <article>
    – doubleDown
    Aug 14, 2017 at 15:03

5 Answers 5

7

This is by design for <h1> tag to be behave like this i.e. size reduce specially for <article>, <aside>, <nav>, <section> and it will keep on decreasing as structure will become more deep i.e. <article> inside <article> inside <article> then size at each level will reduce.

Below is demo:

<!DOCTYPE html>
<html>

<head>
  <title>Headings</title>
  <meta charset="utf-8">
</head>

<body>
  <span>Default</span>
  <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>
  <hr>
  <article>
    <span>One level inside article tag</span>

    <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>
    <hr>
    <article>
      <span>Two level inside article tag</span>

      <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>
      <hr>
      <article>
        <span>Three level inside article tag</span>

        <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>
        <hr>
      </article>
    </article>

  </article>
</body>

</html>

Source:

For reference you can check this official information.

This official information says:

In the following CSS block, x is shorthand for the following selector: :matches(article, aside, nav, section)

x h1 { margin-block-start: 0.83em; margin-block-end: 0.83em; font-size: 1.50em; }
x x h1 { margin-block-start: 1.00em; margin-block-end: 1.00em; font-size: 1.17em; }
x x x h1 { margin-block-start: 1.33em; margin-block-end: 1.33em; font-size: 1.00em; }
x x x x h1 { margin-block-start: 1.67em; margin-block-end: 1.67em; font-size: 0.83em; }
x x x x x h1 { margin-block-start: 2.33em; margin-block-end: 2.33em; font-size: 0.67em; }

Why h1 and h2 are same?

This is by design is because browser manufacturers think/agreed, that beneath web editors, producers and developers the <h2> is commonly treated as the visual more important heading and headings in the content documents should then ideally start with . That is why <h1> font-size is not default bigger inside <article>, <aside>, <nav>, <section> tags.

YOUR CASE IS THE FIRST LEVEL i.e. x h1 where size of h1 is 1.50em but this rule is for h1 only i.e. h2 will have its default/original size 1.50em. Here x is <article> tag.

:-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.5em;
}

:-webkit-any(article,aside,nav,section)
:-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.17em;
}

:-webkit-any() selector matches any of the tags listed inside the parentheses i.e. article,aside,nav,section. And inside an <article>, <aside>, <nav> or <section> tags is reduced to the size 1.50em of a normal heading and so on as demonstared in above demo.

12
  • You did not answer the question at all. The question is: Why <h1> and <h2> have the same font-size in the exact same <article> or <section>? There is no nesting involved here. In the exact same <article> or <section> element, one would intuitively expect <h2> to have a smaller font-size than <h1>. Why is it same instead? Which part of the spec requires this by design and why? Jul 13, 2018 at 2:02
  • @LoneLearner Did you read my answer thoroughly? I think you did. I added explanation of official information. Please check it again. Nested Demo I showed just to understand it from broader perspective. Jul 13, 2018 at 2:10
  • You only answered the "how", not the "why". Firefox does this, too. Why? Ok, the spec says they are supposed to do that. Why? Why does the spec say to do it that way?
    – Rob
    Jul 13, 2018 at 2:12
  • 3
    @VicJordan I did read your answer thoroughly. The discussion about nesting although useful does not answer the question. The link to w3c document does clarify that the browsers are conforming to the spec. Why the spec says so or the rationale behind it still remains unanswered. Jul 13, 2018 at 2:17
  • 2
    @VicJordan There is no need to insinuate the commenters that they are not reading your answer thoroughly. You seem to be missing the point. You say, "designed to make section headings smaller than default page headings and the rule is applied to h1 tag only". The question here is: Why is it not designed to make the <h2> tag smaller than <h1> tag within a section like one would intuitively expect? Jul 13, 2018 at 2:19
6
+50

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.

6
  • 1
    Why quote from a 7 years old W3C draft doc with guidance that is specifically contradicted by more recent W3C Recommendations?
    – Alohci
    Jul 15, 2018 at 3:22
  • 1
    @Alochi, I've checked more recent documentation and you are correct, I've since updated my answer to reflect this. Jul 15, 2018 at 6:09
  • 1
    @HiddenHobbes You mention that <h1> element is never appropriate in sectioning content. Can you point us to the specific line in the guidance that dictates this? Also, if this guidance is true, how else would one avoid the <h1> element in this example: jsfiddle.net/uz3wqobe? Jul 17, 2018 at 7:56
  • It's inferred in the following line "Sectioning content elements are always considered subsections of their nearest ancestor sectioning root or their nearest ancestor element of sectioning content"; if they are always subsections then it is implied that the sectioning root would contain the main heading. The examples in the spec seem to reflect this, however, it is possible that I am taking this too literally and that my interpretation is incorrect. Jul 17, 2018 at 8:57
  • 1
    This is a great answer. Also, when authors started sectioning content, they would use an h2 element for the top-level heading in a section, article, etc. to indicate that those were a rank below the h1s that were direct children of the body. If the W3C could, I think they would like to magically change every top-level heading within sectioning content from an h2 to an h1 and let the browsers use the nesting structure to decide on heading rank. That's what they were hoping for with the original rec. More at webucator.com/blog/2019/08/…
    – Webucator
    Aug 7, 2019 at 18:09
2

Size of the headers are determined by browsers stylesheet (if not specified by user stylesheet). I tried in chrome. There in developer console I found that chrome is overriding the style for h1 to 1.5em for article, aside, nav and section

:-webkit-any(article,aside,nav,section) h1 {
  font-size: 1.5em;
  -webkit-margin-before: 0.83em;
  -webkit-margin-after: 0.83em;
}
2
  • 2
    This is a good start. But the question of "why" still remains. Why does h1 have the same size as h2 inside an <article>?
    – kexxcream
    Sep 18, 2016 at 8:22
  • 4
    @kexxcream Why did you mark this as the accepted answer when it doesn't answer the question?
    – Rob
    Jul 13, 2018 at 2:10
0

It's just about the DOM structure, because the different element has different default style to inherit.

Look at this link form MDN.

<h1>Text A</h1>

<header>
     <h1>Text A</h1> 
</header>
<section>
    <header>
         <h1>Text A</h1>

    </header>
</section>
<article>
    <header>
         <h1>Text A</h1>
          <section>
              <header>
                  <h1>Text A</h1>
              </header>
          </section>
    </header>
</article>

JSFiddle


EDIT

It is because of documentation style requirements. You can find details at HTML 5.1 documentation @ 10.3.7 Sections and headings

3
  • 1
    The link doesn't explain two things: 1) what is the default style that is being inherited by h1 and h2? 2) why doesn't h3, h4, h5, and h6 get the same size as h1 and h2? why is ONLY h1 and h2 the same size?
    – kexxcream
    Sep 17, 2016 at 13:51
  • @kexxcream Edited my post Sep 17, 2016 at 14:02
  • Still doesn't answer my questions. You say it's because "style requirements", but how exactly? Where exactly is this information that says that h1 and h2 will have same size when rendered inside an article?
    – kexxcream
    Sep 17, 2016 at 14:49
-4

h1{ 
font-size:2em; 
} 
h2{ 
font-size:1.5em;
    } 

<article> 
   <h1>This is heading 1.</h1>
   <h2>This is heading 2.</h2>
   <h3>This is heading 3.</h3>
   <h4>This is heading 4.</h4>
   <h5>This is heading 5.</h5>
   <h6>This is heading 6.</h6>
</article>

https://jsfiddle.net/razia/9wsc4vus/

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.