Why is the size of the H1 element different from the section element?
I am a very new HTML5 newbie even in HTML. My confusion is about the header used by the HTML code, this is my code snippet:
<body>
<header>
<h1>Text A</h1>
</header>
<section>
<h1>Text B</h1>
<article>
<header>
<hgroup>
<h1>Text C</h1>
<h2>Text C2</h2>
</hgroup>
</header>
Ok, let's get to the topic, my question is:
-
The <h1> heading inside the <header> part of the <body> is much larger than the <h1> inside the <section> part, which is much larger than the <h1> inside the <article> part of the <section.In other words: Text A> Text B> Text C if they use the same heading.
-
why is text C2 much larger than text C, although text C2 using <h2> while text C uses <h1> and they are in the same place?
Are these some mistakes? By the way, I am using Firefox browser. Thanks in advance.
source to share
JSFiddle.
It's just about the DOM structure.
because the other element has a different default style to inherit.
This is a link in MDN form.
<h1>Text A</h1>
<header>
<h1>Text A</h1>
</header>
<section>
<header>
<h1>Text A</h1>
</header>
</section>
<article>
<header>
<h1>Text A</h1>
<section>
<header>
<h1>Text A</h1>
</header>
</section>
</header>
</article>
source to share
The default rules for h1
differ from each other if inside section
. This is by design. See the following default User Agent rule:
:-webkit-any(article,aside,nav,section) h1 { font-size: 1.5em; }
The above overrides the default Chrome rule for h1
which
h1 { font-size: 2em; }
You can specify your own rule h1
that will override the above rule, since your own rules take precedence over user agent rules:
h1 { font-size: 2em; }
This does not apply to absolute and relative font sizes, or inherited font sizes. This is not to say that it is smaller h1
inside section
, because it inherits from section
, because it section
does not have a built-in font size.
The reason Text C2
more than Text C
is because the above rule by default only applies to h1
elements within elements article
, but not h2
, for reasons best known to browser developers. You can see this by examining the cascade in your favorite DOM / style inspector.
By the way, the :-webkit-any
above is a Chrome-specific pseudo-class that matches any of the nested selectors, so it saves you the trouble of writing article h1, aside h1, nav h1, section h1
. In FF, the equivalent will be :-moz-any
. This is not standard and a pseudo-class will be implemented in CSS4 :matches
.