Login/Register
Why is size of H1 different inside a section element?
Asked Answered
Solved htmlfirefoxhtml-heading
M

2

14

I'm the very new beginner at HTML5 even in HTML. My confuse is about the heading which is used by HTML code, this is my code snippet:

<body>
  <header>
    <h1>Text A</h1> 
  </header>

  <section>
    <h1>Text B</h1>
    <article>
      <header>
        <hgroup>
          <h1>Text C</h1>
          <h2>Text C2</h2>
        </hgroup>
       </header>

Okay let's get to the topic, my question is;

  1. the <h1> heading inside the <header> of the <body> part much bigger than <h1> inside the <section> part which is much bigger than <h1> inside the <article> of the <section> part. In other words : Text A > Text B > Text C, eventhough they're using the same heading.

  2. why the Text C2 much bigger than Text C eventhough Text C2 using <h2> while Text C using <h1> and they are on the same location?

Is it some kind of bugs? I use the Firefox browser, by the way. Thanks in advance.

Maxi answered 10/10, 2014 at 2:6 Comment(2)
Did any of these answers work for you? – Refugia
Possible duplicate of h1 tag smaller than h2, all insde a section tag – Ballistics
S
4

JSFiddle.

It's just about the DOM structure.

because the different element has different default style to inherit.
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>
Surcingle answered 10/10, 2014 at 2:14 Comment(8)
To add to Todd's answer, if you put h1 {font-size: 2em;} in your CSS, all your H1 will all be the same size. You can style them differently using different selectors. For example: section header h1 {font-size: 3em;} will style only the H1 that are inside HEADER that are inside SECTION. – Multipara
@BobBrown By the way, all browsers have their self-style. if you use h1{font-size:2em;}. Actuallly, you use CSS to define the DOM. But in a pure html, The browser always render the DOM. – Surcingle
Okay, so I've open it on IE11, then the style is fine, for the Text A size = Text B size = Text C size (using <h1>), then Text C size > Text C2 size (as <h1> > <h2>), so it depends on our browser then. But this is difficult one, so how do we write our code so ALL of Browser interpret our code the same way, for this case in heading? – Maxi
@Yagami: See my comment about CSS. – Multipara
Okay I get it Bob, so the talk is about doing a extra code with CSS. For now I just skip that, but by the way I understand its point. – Maxi
@ToddMark The MDN link you posted is interesting, but it doesn't answer the question of why two h1 elements would have different sizes. In your answer, you show h1 elements in different nesting locations, but you do not explain why that would cause the h1s to be different sizes. section, article etc. do not have any default font-size setting, so it cannot be that the h1 inside section is inheriting something from it. – Refugia
@ToddMark - Note that your HTML is invalid. You cannot have a header be the descendant of another header. – Babur
By the way, all browsers have their self-style The correct term would be "user agent stylesheet". – Refugia
R
15

Default rules for h1 are different if it's inside a section. This is by design. See the following default Chrome "user agent" rule:

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

The above overrides the default Chrome rule for h1, which is

h1 { font-size: 2em; }

You can specify your own h1 rule, which will override the above rule, since your own rules have a higher priority origin than user-agent rules:

h1 { font-size: 2em; }

This is not related to absolute vs. relative font sizes, nor inherited font sizes. It cannot be that the h1 inside the section is smaller because it is inheriting from section, because section has no built-in font size.

The reason that Text C2 is bigger than Text C is that the default rule mentioned above applies only to h1 elements inside article elements, but not h2, for reasons best known to the browser developers. You could see this by examining the cascade in your favorite DOM/style inspector.

By the way, the :-webkit-any above is a Chrome-specific pseudo-class which matches any of the enclosed selectors, so it saves you from writing article h1, aside h1, nav h1, section h1. In FF, the equivalent would be :-moz-any. This is not standard, and in CSS4 will be implemented as a :matches pseudo-class.

Refugia answered 10/10, 2014 at 2:49 Comment(0)
S
4

JSFiddle.

It's just about the DOM structure.

because the different element has different default style to inherit.
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>
Surcingle answered 10/10, 2014 at 2:14 Comment(8)
To add to Todd's answer, if you put h1 {font-size: 2em;} in your CSS, all your H1 will all be the same size. You can style them differently using different selectors. For example: section header h1 {font-size: 3em;} will style only the H1 that are inside HEADER that are inside SECTION. – Multipara
@BobBrown By the way, all browsers have their self-style. if you use h1{font-size:2em;}. Actuallly, you use CSS to define the DOM. But in a pure html, The browser always render the DOM. – Surcingle
Okay, so I've open it on IE11, then the style is fine, for the Text A size = Text B size = Text C size (using <h1>), then Text C size > Text C2 size (as <h1> > <h2>), so it depends on our browser then. But this is difficult one, so how do we write our code so ALL of Browser interpret our code the same way, for this case in heading? – Maxi
@Yagami: See my comment about CSS. – Multipara
Okay I get it Bob, so the talk is about doing a extra code with CSS. For now I just skip that, but by the way I understand its point. – Maxi
@ToddMark The MDN link you posted is interesting, but it doesn't answer the question of why two h1 elements would have different sizes. In your answer, you show h1 elements in different nesting locations, but you do not explain why that would cause the h1s to be different sizes. section, article etc. do not have any default font-size setting, so it cannot be that the h1 inside section is inheriting something from it. – Refugia
@ToddMark - Note that your HTML is invalid. You cannot have a header be the descendant of another header. – Babur
By the way, all browsers have their self-style The correct term would be "user agent stylesheet". – Refugia

© 2022 - 2024 — McMap. All rights reserved.