CODEWITHSUNDEEP
htmlfirefoxhtml-heading
Yagami
Yagami

Reputation: 339

Why is size of H1 different inside a section element?

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.

Upvotes: 15

Views: 10929

Answers (2)

user663031
user663031

Reputation:

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.

Upvotes: 16

Todd Mark
Todd Mark

Reputation: 1885

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>

Upvotes: 4

Related Questions