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

and/or

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

and/or

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

headings inside an

,

,

or

tags is reduced to the size of a normal

heading, and any

inside two such tags is shrunk further down, presumably to the size of a normal

or so.

Crucially, the Chrome default style sheet doesn't have any such special rules for

tags, so they'll always (in Chrome 33, anyway) be shown at the same size. Thus, when surrounded by two or more

and/or

tags,

becomes smaller than

.