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>
why h1 content larger in snippet below not 1 above?
<h1>first line</h1> <h2>second line</h2>
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>
.
Comments
Post a Comment