Search code examples
htmlfirefoxhtml-heading

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.

Solution

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