Miks me ei saa kasutada tavalisi div-täge asenduseks section ja header-tägit?

Semantiliste <section> ja <header> siltide kasutamine asemel universaalse <div> parandab ligipääsetavust ja koodi loetavust.

1. Ligipääsetavus (Accessibility): Ekraanilugejad ja teised abitehnoloogiad kasutavad semantilisi silte sisu struktuuri mõistmiseks. <header> tähistab sissejuhatavat osa (näiteks logo, navigeerimine), <section> on temaatiline plokk. <div> ise ei kanna semantilist tähendust.

2. SEO (Search Engine Optimization): Otsingumootorid indekseerivad paremini sisu, mis on struktureeritud semantiliste siltidega, mis võib parandada järjestust.

3. Loetavus ja hooldus: Semantilised silte dokumenteerivad struktuuri ise. Arendaja, kes loeb koodi, mõistab kohe ploki eesmärgi, ilma et peaks süvenema stiilidesse või kommentaaridesse.

Kokkuvõte: <div> sobib elementide grupeerimiseks, kui semantika pole oluline (näiteks stiilide rakendamiseks). <section> ja <header> kannavad tähendust ning muudavad veebilehed arusaadavamaks nii masinatele kui inimestele.

Näide:

<!-- Semantiliselt õige struktuur -->
<header>
  <h1>Veebilehe nimi</h1>
  <nav>
    <ul>
      <li><a href="#">Link</a></li>
    </ul>
  </nav>
</header>

<section>
  <h2>Sektsiooni pealkiri</h2>
  <p>Sektsiooni sisu...</p>
</section>

<!-- Näide div kasutamisest, mis ei kanna semantilist tähendust -->
<div> <!-- header? section? teadmata -->
  <h1>Veebilehe nimi</h1>
  <div> <!-- nav? -->
    <ul>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

<div> <!-- section? -->
  <h2>Sektsiooni pealkiri</h2>
  <p>Sektsiooni sisu...</p>
</div>