Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why is H2 larger than H1?

Tags:

html

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/

like image 209
4thSpace Avatar asked Apr 06 '14 19:04

4thSpace


People also ask

Why is my H2 bigger than my H1?

font size values in a way that will follow the header hierarchy ( h1 has to be bigger than h2 , h2 has to be bigger than h3 etc.) because the current web layout has a slightly bigger font-size value for h2 than h1 .

Is H2 the largest heading?

HTML defines six levels of headings. A heading element implies all the font changes, paragraph breaks before and after, and any white space necessary to render the heading. The heading elements are H1, H2, H3, H4, H5, and H6 with H1 being the highest (or most important) level and H6 the least.

What is the difference between H1 and H2 tags?

Whereas your H1 tag is used for your document's main heading; Your main points are wrapped in subheadings known as H2s. In other words: A <h2> tag defines the second-level headings in your webpage.

Can an H2 be above an H1?

No. If you put an h2 tag somewhere on a page, there has to be a h1 tag somewhere before.


1 Answers

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

like image 188
Ilmari Karonen Avatar answered Sep 22 '22 06:09

Ilmari Karonen