title: Why is size of H1 different inside a section element?
body: <p>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:</p>
  
  <pre><code>&lt;body&gt;
    &lt;header&gt;
      &lt;h1&gt;Text A&lt;/h1&gt; 
    &lt;/header&gt;
  
    &lt;section&gt;
      &lt;h1&gt;Text B&lt;/h1&gt;
      &lt;article&gt;
        &lt;header&gt;
          &lt;hgroup&gt;
            &lt;h1&gt;Text C&lt;/h1&gt;
            &lt;h2&gt;Text C2&lt;/h2&gt;
          &lt;/hgroup&gt;
         &lt;/header&gt;
  </code></pre>
  
  <p>Okay let's get to the topic, my question is;</p>
  
  <ol>
  <li><p>the &lt;h1&gt; heading inside the &lt;header> of the &lt;body> part much bigger than &lt;h1> inside the &lt;section> part which is much bigger than &lt;h1> inside the &lt;article> of the &lt;section> part. In other words : Text A > Text B > Text C, eventhough they're using the same heading.</p></li>
  <li><p>why the Text C2 much bigger than Text C eventhough Text C2 using &lt;h2> while Text C using &lt;h1> and they are on the same location?   </p></li>
  </ol>
  
  <p>Is it some kind of bugs? I use the Firefox browser, by the way. Thanks in advance.</p>