Why is H2 larger than H1?

Question

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

<article>
    <section>
    <header>
        <h1>First Header</h1>
    </header>
    </section>
    <section>
    <header>
        <h2>Second Header</h2>
    </header>
    </section>
</article>

http://jsfiddle.net/abugp/

Why is the H1 content larger in the snippet below but not the one above?

<h1>First Line</h1>
<h2>Second Line</h2>

http://jsfiddle.net/59T43/

@StuartLC: What if there is no style defined? I thought h1 was always the largest when no style is defined. This is the first time I've seen this behavior. I've appended a new snippet to the OP. — 4thSpace, Apr 06 '14 at 19:11
http://jsfiddle.net/Es6ZL/ - you could use normalize.css to set the styles to a default for all browsers. — JohanVdR, Apr 06 '14 at 19:25
@JohanVandenRym: Yes - good comment. I think any type of reset css would work. — 4thSpace, Apr 06 '14 at 22:32
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:03

score 65 · Accepted Answer · answered Apr 06 '14 at 19:17

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

Firefox has the same non-standard :moz rules.. :-moz-any(article, aside, nav, section) :-moz-any(article, aside, nav, section) h1 1.17em — enapupe, Apr 06 '14 at 19:18
@4thSpace: What "text"? The Chrome default user agent stylesheet? You can see the relevant parts of it just by using "Inspect element" as I suggested, but if you want the whole thing, the links in [this answer](http://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements/6867287#6867287) may help. — Ilmari Karonen, Apr 06 '14 at 19:22
@IlmariKaronen: Ah, so this really is a browser by browser issue? — 4thSpace, Apr 06 '14 at 19:23
@4thSpace: Yes, although most modern browsers do tend to more or less follow the [HTML 5.1 rendering suggestions](http://www.w3.org/html/wg/drafts/html/master/rendering.html#rendering) linked by Benio in his answer, which is why the styling in Chrome and Firefox is so similar. — Ilmari Karonen, Apr 06 '14 at 19:26

score 2 · Answer 2 · answered Apr 07 '14 at 09:56

2

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.

answered Apr 07 '14 at 09:56

cloudy_weather

2,837
12
38
63

score 2 · Answer 3 · answered Mar 03 '20 at 06:22

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.

Why is H2 larger than H1?

3 Answers3

Linked