<section class="grandparent">
  <h1>Tähenduslikud elemendid</h1>
  <p>Tähenduslikud elemendid on need elemendid, millel on HTML5'es kindel tähendus ja otstarve.</p>
  <p>Tähenduslikud elemendid on veebiarenduses väga tähtsad.</p>
  <section class="subsection-1">
    <h2>Kuidas tähenduslikke elemente kasutada?</h2>
    <p>Tähenduslikke elemente tuleb kasutada nagu teisigi elemente, aga tuleb meeles pidada seda, et <br> kõige tähtsam on kasutada õiget elementi õiges kohas.</p>
    <p>Kui sa ei ole mingi elemendi tähenduses kindel, siis otsi lisamaterjali ja tee see endale selgeks.</p>
  </section>
  <section class="subsection-1">
    <h2>Tähenduslikke elementide kasulikkus</h2>
    <p>Tähenduslikud elemendid on väga tähtsad just kasutajakogemuse poolest. Lisaks annavad need veebilehele ka rohkem selgust arendamise poole pealt.</p>
    <section class="subsection-2">
      <h2>SEO</h2>
      <p>Tähenduslikud elemendid mängivad SEO's rolli.</p>
    </section>
  </section>
</section>
<section class="grandparent">
    <h1>Mitte-tähenduslikud elemendid</h1>
    <section class="subsection-1">
      <h2>Kuidas mittetähenduslikke elemente kasutada?</h2>
      <p>Tähenduslikke elemente tuleks kasutada ainult siis, kui ei ole sobivaid tähenduslikke elemente.</p>
    </section>
</section>
.grandparent{
  background-color: #0a757f;
  padding: 2px 20px 10px 20px;
  margin-top: 20px;
}

.subsection-1{
  background-color: #c18762;
  padding: 2px 10px 10px 10px;
  margin-top: 15px;
}

.subsection-2{
  background-color: #dad3c8;
  padding: 1px 5px 5px 5px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.