11

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.

Yagami
  • 199
  • 1
  • 11
  • Did any of these answers work for you? –  Oct 12 '14 at 17:11
  • Possible duplicate of [h1 tag smaller than h2, all insde a section tag](http://stackoverflow.com/questions/20642585/h1-tag-smaller-than-h2-all-insde-a-section-tag) – Joe Feb 20 '17 at 14:04

2 Answers2

12

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.

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>
Community
  • 1
  • 1
Todd Mark
  • 1,847
  • 13
  • 25
  • 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. – Bob Brown Oct 10 '14 at 02:26
  • @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. – Todd Mark Oct 10 '14 at 02:34
  • 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

    ), then Text C size > Text C2 size (as

    >

    ), 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?

    – Yagami Oct 10 '14 at 02:37
  • @Yagami: See my comment about CSS. – Bob Brown Oct 10 '14 at 02:41
  • 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. – Yagami Oct 10 '14 at 02:45
  • @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 `h1`s 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. –  Oct 10 '14 at 03:10
  • 1
    @ToddMark - Note that your HTML is invalid. You cannot have a header be the descendant of another header. – Alohci Oct 10 '14 at 06:40
  • *By the way, all browsers have their self-style* The correct term would be "user agent stylesheet". –  May 28 '16 at 02:00