Kodėl negalime naudoti įprastų div žymų vietoj section ir header žymų?

Naudojant semantinius žymenis <section> ir <header> vietoj universalaus <div>, pagerinama prieinamumas ir kodo skaitomumas.

1. Prieinamumas: Ekrano skaitytuvai ir kitos pagalbinės technologijos naudoja semantinius žymenis, kad suprastų turinio struktūrą. <header> žymi įvadinę dalį (pvz., logotipą, navigaciją), <section> — tematinį bloką. <div> pats savaime neturi semantinės reikšmės.

2. SEO (Paieškos sistemų optimizavimas): Paieškos varikliai geriau indeksuoja turinį, struktūruotą naudojant semantinius žymenis, kas gali pagerinti reitingą.

3. Kodo skaitomumas ir priežiūra: Semantiniai žymenys patys dokumentuoja struktūrą. Kūrėjas, skaitantis kodą, iš karto supranta bloko paskirtį, nereikia gilintis į stilius ar komentarus.

Apibendrinant: <div> tinka elementų grupavimui, kai semantika nėra svarbi (pvz., stilių taikymui). <section> ir <header> neša prasmę ir daro tinklalapius suprantamesnius tiek mašinoms, tiek žmonėms.

Pavyzdys:

<!-- Semantiškai teisinga struktūra -->
<header>
  <h1>Svetainės pavadinimas</h1>
  <nav>
    <ul>
      <li><a href="#">Nuoroda</a></li>
    </ul>
  </nav>
</header>

<section>
  <h2>Skyriaus pavadinimas</h2>
  <p>Skyriaus turinys...</p>
</section>

<!-- Pavyzdys naudojant div, kuris nesuteikia semantikos -->
<div> <!-- header? skyriaus? nežinoma -->
  <h1>Svetainės pavadinimas</h1>
  <div> <!-- navigacija? -->
    <ul>
      <li><a href="#">Nuoroda</a></li>
    </ul>
  </div>
</div>

<div> <!-- skyriaus? -->
  <h2>Skyriaus pavadinimas</h2>
  <p>Skyriaus turinys...</p>
</div>