html - Why is H2 larger than H1? -

in following code snippet, why h2 content larger 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 h1 content larger in snippet below not 1 above?

<h1>first line</h1> <h2>second line</h2> 

http://jsfiddle.net/59t43/

since haven't specified styles, size of headings determined browser's default style sheet. in particular, means relative size of 2 headers may vary depending on viewer's browser.

looking @ fiddle in chrome 33, see effect describe. right-clicking headings , selecting "inspect element" reveals issue cause presence of <article> and/or <section> tags around headings.

in particular, chrome's default style sheet includes rules:

h1 { font-size: 2em } 

and:

h2 { font-size: 1.5em } 

however, former rule overridden inside <article> and/or <section> tags more specific rules, presumably designed make section headings smaller 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 matches of tags listed inside parentheses. effect <h1> headings inside <article>, <aside>, <nav> or <section> tags reduced size of normal <h2> heading, , <h1> inside two such tags shrunk further down, presumably size of normal <h3> or so.

crucially, chrome default style sheet doesn't have such special rules <h2> tags, they'll (in chrome 33, anyway) shown @ same size. thus, when surrounded 2 or more <article> and/or <section> tags, <h1> becomes smaller <h2>.