Why is the size of the H1 element different from the section element?

I am a very new HTML5 newbie even in HTML. My confusion is about the header used by the 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>

      

Ok, let's get to the topic, my question is:

  • The <h1> heading inside the <header> part of the <body> is much larger than the <h1> inside the <section> part, which is much larger than the <h1> inside the <article> part of the <section.In other words: Text A> Text B> Text C if they use the same heading.

  • why is text C2 much larger than text C, although text C2 using <h2> while text C uses <h1> and they are in the same place?

Are these some mistakes? By the way, I am using Firefox browser. Thanks in advance.

+3


source to share


2 answers


JSFiddle.

It's just about the DOM structure.



because the other element has a different default style to inherit.
This is a link in MDN form.

<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>

      

+2


source


The default rules for h1

differ from each other if inside section

. This is by design. See the following default User Agent rule:

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

      

The above overrides the default Chrome rule for h1

which

h1 { font-size: 2em; }

      

You can specify your own rule h1

that will override the above rule, since your own rules take precedence over user agent rules:



h1 { font-size: 2em; }

      

This does not apply to absolute and relative font sizes, or inherited font sizes. This is not to say that it is smaller h1

inside section

, because it inherits from section

, because it section

does not have a built-in font size.

The reason Text C2

more than Text C

is because the above rule by default only applies to h1

elements within elements article

, but not h2

, for reasons best known to browser developers. You can 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 that matches any of the nested selectors, so it saves you the trouble of writing article h1, aside h1, nav h1, section h1

. In FF, the equivalent will be :-moz-any

. This is not standard and a pseudo-class will be implemented in CSS4 :matches

.

+2


source







All Articles