Different behavior of a title tag with a section

Question

header tag (h1 and h2). If I write h1both h2in sectionor aside, it shows the same font size, and if I put it outside of sectionor aside, it works fine.

I’m already looking for a lot, but I don’t get an answer.

Anyone have an answer.

<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>


<section>
    <h1>heading 1</h1>
    <h2>heading 2</h2>
    <h3>heading 3</h3>
</section>

<aside>
    <h1>heading 1</h1>
    <h2>heading 2</h2>
    <h3>heading 3</h3>
</aside>

Run codeHide result

Answer 1

These are custom browser styles) For example. h1 are outside the section or aside font-size: 2em, but in the section, article, aside, nav have font-size: 1.5em See in devtools.

:-webkit-any(article,aside,nav,section) h1 {
font-size: 1.5em;
-webkit-margin-before: 0.83em;
-webkit-margin-after: 0.83em;
}

Outside article, section, nav, asideh1 there are these styles.

h1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}

If you do not want such surprises - reset browser styles with normalize.css)

Answer 2

HTML5 W3C

h1 h2 :

h1 { margin-top: 0.67em; margin-bottom: 0.67em; font-size: 2.00em; font-weight: bold; }
h2 { margin-top: 0.83em; margin-bottom: 0.83em; font-size: 1.50em; font-weight: bold; }

, h1 font-size: 2.00em; h2 font-size:1.5em

.

, , h1 article, aside, nav section - h1 -:

: ( - )

, article, , nav h1, h2-h5 h1 hgroup, .

x - , , article, , nav , , :

@namespace url(http://www.w3.org/1999/xhtml);

x h1 { margin-top: 0.83em; margin-bottom: 0.83em; font-size: 1.50em; }
x x h1 { margin-top: 1.00em; margin-bottom: 1.00em; font-size: 1.17em; }
x x x h1 { margin-top: 1.33em; margin-bottom: 1.33em; font-size: 1.00em; }
x x x x h1 { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; }
x x x x x h1 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; }

, h1 1- section aside .., font-size:1.5em.

, h1 section aside font-size h2 (1.5em), .

, h1 section, aside ( nav article), h1 .

, , , h1 article, section - , h2 HTML5 .

<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>

<hr />
<section>
  <h1>heading 1</h1>
  <h2>heading 2</h2>
  <h3>heading 3</h3>
</section>
<hr />
<article>
  <section>
    <h1>heading 1 - Nested by 2 levels - *smaller* than h2 !!</h1>
    <h2>heading 2</h2>
    <h3>heading 3</h3>
  </section>
</article>

Hide result