CODEWITHSUNDEEP
htmlcsstags
KingDave212
KingDave212

Reputation: 163

h1 tag smaller than h2, all inside a section tag

My h1 tag, which is inside a section tag, is smaller than an h2 tag. The h1 tag was the correct size when out side the section tag. I keep looking through my CSS page and am finding nothing that would make this happen.

body {
  font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
  background-color: #42413C;
  margin: 0;
  padding: 0;
  color: #000;
  background-image: url(images/mass_effect_1_citadel_dreamscene_by_droot1986-d5sw7hu.jpg);
}

a img {
  border: none;
}

.container {
  width: 960px;
  background-color: #192370;
  margin: 0 auto;
}

header {
  background-color: #050a2e;
}

.sidebar1 {
  float: left;
  width: 175px;
  background-color: #2236d1;
  padding-bottom: 10px;
  border: solid thin black;
  text-align: center;
}

.content {
  padding: 10px 0;
  width: 780px;
  float: right;
  border: solid thin black;
}

footer {
  padding: 10px 0;
  background-color: #050a2e;
  position: relative;
  clear: both;
  text-align: center;
}

header,
section,
footer,
aside,
article,
figure {
  display: block;
  color: white;
}

a:link {
  text-decoration: none;
  color: #d1bd22;
  font-size: 1.3em;
}

a:visited {
  text-decoration: none;
  color: white;
  font-size: 1.3em;
}

a:hover {
  text-decoration: underline;
  color: #d1bd22;
  font-size: 1.3em;
}

a:active {
  text-decoration: underline;
  color: white;
  font-size: 1.3em;
}
<h1>H1 Outside section</h1>
<h2>H2 Outside section</h2>
<section>
  <h1>H1 Inside section</h1>
  <h2>H2 Inside section</h2>
  <section>
    <h1>H1 Inside nested section</h1>
    <h2>H2 Inside nested section</h2>
  </section>
</section>

Upvotes: 2

Views: 2588

Answers (1)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201866

If you test the situation without your style sheet, you will see that h1 inside a section element appears in a smaller font. This is caused by a browser style sheet, in browsers that support section and its suggested rendering in HTML5. The section element has been defined so that within it, an h1 element is a heading for the section, so relative to the page as a whole, it is at the 2nd level (or even at a lower level, if section elements have been nested).

There are various opinions on the adequacy of that approach, but that’s what HTML5 drafts say and what some browsers have implemented. On the other hand, old browsers ignore such rules, so the approach is not practically robust. It is safer (and quite acceptable according to HTML5) to use h2 for section headings.

Upvotes: 11

Related Questions