Proč nem můžeme používat běžné tagy div místo tagů…

Použití sémantických značek <section> a <header> namísto univerzálního <div> zlepšuje přístupnost a čitelnost kódu.

Přístupnost: Čtečky obrazovky a další asistivní technologie používají sémantické značky k pochopení struktury obsahu. <header> označuje úvodní část (například logo, navigace), <section> je tematický blok. <div> sám o sobě nemá sémantickou zátěž.
SEO (Optimalizace pro vyhledávače): Vyhledávače lépe indexují obsah strukturovaný pomocí sémantických značek, což může zlepšit žebříček.
Čitelnost a údržba kódu: Sémantické značky dokumentují strukturu samy o sobě. Vývojář, který čte kód, ihned pochopí účel bloku, aniž by se zabýval styly nebo komentáři.

Shrnuto: <div> je vhodný pro seskupování prvků, když na sémantiku nezáleží (například pro použití stylů). <section> a <header> nesou významovou zátěž a činí webové stránky srozumitelnější jak pro stroje, tak pro lidi.

Příklad:

<!-- Sémanticky správná struktura -->
<header>
  <h1>Název stránky</h1>
  <nav>
    <ul>
      <li><a href="#">Odkaz</a></li>
    </ul>
  </nav>
</header>

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

<!-- Příklad použití div, který nepřenáší sémantiku -->
<div> <!-- header? sekce? neznámé -->
  <h1>Název stránky</h1>
  <div> <!-- navigace? -->
    <ul>
      <li><a href="#">Odkaz</a></li>
    </ul>
  </div>
</div>

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

Proč nem můžeme používat běžné tagy div místo tagů section a header?