Miért nem használhatunk normál div tageket a section és header helyett?

A <section> és <header> szemantikus címkék használata az univerzális <div> helyett javítja a hozzáférhetőséget és az olvashatóságot.

1. Hozzáférhetőség: A képernyőolvasók és más segédeszközök szemantikus címkéket használnak a tartalom szerkezetének megértéséhez. <header> az bevezető részt jelöli (pl. logó, navigáció), <section> pedig egy tematikus blokk. A <div> önmagában nem hordoz szemantikus jelentést.

2. SEO (Keresőoptimalizálás): A keresőmotorok jobban indexelik a szemantikus címkékkel strukturált tartalmat, ami javíthatja a rangsort.

3. Kód olvashatósága és karbantartása: A szemantikus címkék dokumentálják a szerkezetet. A kódot olvasó fejlesztő azonnal érti a blokk célját, anélkül, hogy stílusokat vagy megjegyzéseket kellene tanulmányoznia.

Összefoglalva: A <div> alkalmas elemek csoportosítására, ha a szemantika nem fontos (pl. stílus alkalmazásához). A <section> és <header> hordozza a jelentést, és weboldalakat mind az emberek, mind a gépek számára könnyebben érthetővé tesz.

Példa:

<!-- Szemantikus szerkezet -->
<header>
  <h1>Oldal neve</h1>
  <nav>
    <ul>
      <li><a href="#">Link</a></li>
    </ul>
  </nav>
</header>

<section>
  <h2>Szakaszcím</h2>
  <p>A szakasz tartalma...</p>
</section>

<!-- Div példája, ami nem hordoz szemantikai jelentést -->
<div> <!-- header? szakasz? nem ismert -->
  <h1>Oldal neve</h1>
  <div> <!-- navigáció? -->
    <ul>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

<div> <!-- szakasz? -->
  <h2>Szakaszcím</h2>
  <p>A szakasz tartalma...</p>
</div>