Why is H2 greater than H1?

Question

In the following code snippet, why is the H2 content greater 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 higher in the fragment lower but not higher?

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

http://jsfiddle.net/59T43/

Answer 1

Since you did not specify any styles, the size of the headers is determined by your default browser style sheet. In particular, this means that the relative size of the two headers may vary depending on the browsing browser.

Looking at my fiddle in Chrome 33, I see the effect that you are describing. Right-clicking on the headers and selecting “Validation Element” indicates that the problem is with the presence of the <article> and / or <section> tags around the headers.

In particular, the default stylesheet in Chrome usually includes rules:

 h1 { font-size: 2em } 

and

 h2 { font-size: 1.5em } 

However, the old rule is redefined inside the <article> and / or <section> tags with some more specific rules, supposedly designed to make the section headers smaller than the regular full page headers:

 :-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; } 

Custom selector :-webkit-any(...) supposedly just matches any of the tags listed in parentheses. The effect is that any <h1> headers inside the <article> , <aside> , <nav> or <section> tags are reduced to the size of the normal <h2> header, and any <h1> inside the two such tags has shrunk down, presumably , to the size of a normal <h3> or so.

Actually, in the Chrome stylesheet, by default there are no special rules for <h2> tags, so they will always (in Chrome 33, anyway) be displayed the same size. Thus, when surrounded by two or more <article> and / or <section> tags, <h1> becomes smaller than <h2> .

Answer 2

This is due to documentation style requirements. Details can be found in the HTML 5.1 @ 10.3.7 documentation. Sections and Headers

Answer 3

If you do not specify any style, your browser will select the default style. In the first example, h1 and h2 are inside the header in the section, and in the second, in the root. Then it is acceptable that the behavior is different.