CODEWITHSUNDEEP
csshtmlheading
Mukul Kant
Mukul Kant

Reputation: 7122

Different behavior of heading tag with section

heading tag behavior (h1 and h2) If I am write h1 and h2 in section or aside it shows same font size and if I put this outside of section or aside tag it works normal.

I already search a lot but don't get the answer.

Anybody have 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>

Upvotes: 6

Views: 762

Answers (2)

Narek-T
Narek-T

Reputation: 1918

This is an browser custom styles) Eg. h1 outside of section or aside have font-size: 2em, but in 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 of article, section, nav, aside h1 have this 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 don't want such surprises - reset browser styles with normalize.css )

Upvotes: -1

Danield
Danield

Reputation: 125651

The Default Styles for HTML5 as per the W3C spec can be found here

Now, from the above spec, the default styling for the h1 and h2 tag is the following:

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; }

So by default the h1 tag has font-size: 2.00em; and h2 tag has font-size:1.5em

So far so good.

If however the h1 tag is nested within article, aside, nav, or section elements - then the h1 is rendered differently:

The following is the relevant section from the spec: (bold is mine)

The article, aside, nav, and section elements are expected to affect the margins and font size of h1 elements, as well as h2–h5 elements that follow h1 elements in hgroup elements, based on the nesting depth.

If x is a selector that matches elements that are either article, aside, nav, or section elements, then the following rules capture what is expected:

@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; }

Notice that when the h1 tag is nested 1 level within a section or aside etc. it gets by default font-size:1.5em.

This explains why the h1 element within a section or aside element has the same font-size as the h2 element (1.5em) as described in the question.

Now if the h1 element has a greater level of nesting within section, aside (or nav or article) elements then the h1 element gets smaller and smaller font sizes.

To illustrate this take a look at this fiddle, here, because the h1 is nested within both an article and a section - it is rendered even smaller than the h2 by the HTML5 default styling.

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

Upvotes: 3

Related Questions