Why is H2 larger than H1?

Question

In the following code snippet, why is the H2 content larger than the H1 content?

    

    

        
First H         


        

Answer 1

Since you haven't specified any styles, the size of the headings is determined by your browser's default style sheet. In particular, this means that the relative size of the two headers may vary depending on the viewer's browser.

Looking at your fiddle in Chrome 33, I do see the effect you describe. Right-clicking the headings and selecting "Inspect element" reveals that the issue is cause by the presence of the <article> and/or <section> tags around the headings.

In particular, Chrome's default style sheet normally includes the rules:

h1 { font-size: 2em }

and:

h2 { font-size: 1.5em }

However, the former rule is overridden inside <article> and/or <section> tags by some more specific rules, presumably designed to make section headings smaller than normal "full page" headings:

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

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

The non-standard :-webkit-any(...) selector presumably just matches any of the tags listed inside the parentheses. The effect is that any <h1> headings inside an <article>, <aside>, <nav> or <section> tags is reduced to the size of a normal <h2> heading, and any <h1> inside two such tags is shrunk further down, presumably to the size of a normal <h3> or so.

Crucially, the Chrome default style sheet doesn't have any such special rules for <h2> tags, so they'll always (in Chrome 33, anyway) be shown at the same size. Thus, when surrounded by two or more <article> and/or <section> tags, <h1> becomes smaller than <h2>.

Answer 2

This is part of the HTML5 spec for sections and headings:

In the following CSS block, x is shorthand for the following selector: :matches(article, aside, nav, section)

x h1 { margin-block-start: 0.83em; margin-block-end: 0.83em; font-size: 1.50em; }
x x h1 { margin-block-start: 1.00em; margin-block-end: 1.00em; font-size: 1.17em; }
x x x h1 { margin-block-start: 1.33em; margin-block-end: 1.33em; font-size: 1.00em; }
x x x x h1 { margin-block-start: 1.67em; margin-block-end: 1.67em; font-size: 0.83em; }
x x x x x h1 { margin-block-start: 2.33em; margin-block-end: 2.33em; font-size: 0.67em; }

Curiously, there are no such rules for h2–h6.

Answer 3

If you don't specify any style, your browser will choose its default style. In the first example the h1 and h2 are inside an header in a section, while in the second case they are in the root. Then it is admissible that the behaviour is different.