Prečo nemôžeme použiť bežné tagy div namiesto tagov section a header?

Použitie sémantických značiek <section> a <header> namiesto univerzálneho <div> zlepšuje prístupnosť a čitateľnosť kódu.

1. Prístupnosť: Čítače obrazov a ďalšie technológie asistencie používajú sémantické značky na pochopenie štruktúry obsahu. <header> označuje úvodnú časť (napríklad logo, navigácia), <section> je tematický blok. <div> sám o sebe nemá sémantickú záťaž.

2. SEO (Optimalizácia pre vyhľadávače): Vyhľadávače lepšie indexujú obsah štruktúrovaný pomocou sémantických značiek, čo môže zlepšiť hodnotenie.

3. Čitateľnosť a údržba kódu: Sémantické značky dokumentujú štruktúru samy o sebe. Vývojár, ktorý číta kód, okamžite pochopí účel bloku, bez potreby skúmania štýlov alebo komentárov.

Zhrnutie: <div> je vhodný na skupinové usporiadanie prvkov, keď sémantika nie je dôležitá (napríklad na použitie štýlov). <section> a <header> nesú významovú záťaž a robia webové stránky zrozumiteľnejšími ako pre stroje, tak aj pre ľudí.

Príklad:

<!-- Sémanticky správna štruktúra -->
<header>
  <h1>Názov stránky</h1>
  <nav>
    <ul>
      <li><a href="#">Odkaz</a></li>
    </ul>
  </nav>
</header>

<section>
  <h2>Nadpis sekcie</h2>
  <p>Obsah sekcie...</p>
</section>

<!-- Príklad použitia div, ktorý neprenáša sémantiku -->
<div> <!-- header? sekcia? neznáme -->
  <h1>Názov stránky</h1>
  <div> <!-- navigácia? -->
    <ul>
      <li><a href="#">Odkaz</a></li>
    </ul>
  </div>
</div>

<div> <!-- sekcia? -->
  <h2>Nadpis sekcie</h2>
  <p>Obsah sekcie...</p>
</div>