Login/Register
Same font size for h1 and h2 in article
Asked Answered
Solved csshtmlhtml-heading
P

5

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>
Pent answered 17/9, 2016 at 13:32 Comment(3)
Instead of measuring letters you can check "computed styles" in your browser's console. – Maryjomaryl
@Lends Excellent suggestion, thank you. – Pent
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> – Prana
S
8

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.

Snowblink answered 13/7, 2018 at 1:55 Comment(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? – Thalamencephalon
@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. – Snowblink
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? – Kamala
@Kamala please read my answer again thoroughly. I have written designed to make section headings smaller than default page headings and the rule is applied to h1 tag only, so at level one h1 and h2 size are same – Snowblink
@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. – Thalamencephalon
@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? – Thalamencephalon
@LoneLearner link was already there from begining I didn't add it later you can check the edit history. – Snowblink
@VicJordan You are right. The link was indeed there. I did miss the link while reading it the first time. I apologize for not reading that. – Thalamencephalon
@LoneLearner Thanks for making it clear requirement. Could you please edit your question add this Why is it not designed to make the <h2> tag smaller than <h1> tag within a section like one would intuitively expect? Because it makes more sense. – Snowblink
@VicJordan I did not downvote you. :) +1-ed it to offset the negative votes. :) – Thalamencephalon
@Kamala I have updated answer and added exact reason why <h1> is not bigger but same as <h2>inside the a section. – Snowblink
@LoneLearner I have updated answer and added exact reason why <h1> is not bigger but same as <h2>inside the a section. I think it will make sense and is more clear now. – Snowblink
P
7

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.

Parrot answered 13/7, 2018 at 8:44 Comment(6)
Why quote from a 7 years old W3C draft doc with guidance that is specifically contradicted by more recent W3C Recommendations? – Squadron
@Alochi, I've checked more recent documentation and you are correct, I've since updated my answer to reflect this. – Parrot
@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? – Thalamencephalon
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. – Parrot
Your example is exactly how I would have thought to place the heading, but following the guidance it would seem that something like this would be what is expected jsfiddle.net/on4vrmtx with the heading belonging to the body sectioning root. This doesn't seem to be ideal in a real world scenario. – Parrot
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/… – Perjury
P
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;
}
Papen answered 17/9, 2016 at 14:56 Comment(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>? – Pent
@Pent Why did you mark this as the accepted answer when it doesn't answer the question? – Kamala
A
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

Ascus answered 17/9, 2016 at 13:44 Comment(3)
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? – Pent
@Pent Edited my post – Ascus
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? – Pent
U
-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/

Ultun answered 17/9, 2016 at 14:40 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.