Zašto ne možemo koristiti obične div oznake umesto section i header oznaka?

Upotreba semantičkih oznaka <section> i <header> umesto univerzalnog <div> poboljšava pristupačnost i čitljivost koda.

1. Pristupačnost: Čitači ekrana i druge pomoćne tehnologije koriste semantičke oznake za razumevanje strukture sadržaja. <header> označava uvodni deo (npr. logo, navigacija), <section> je tematski blok. <div> sam po sebi ne nosi semantičko značenje.

2. SEO (Optimizacija za pretraživače): Pretraživači bolje indeksiraju sadržaj strukturiran pomoću semantičkih oznaka, što može poboljšati rang.

3. Čitljivost i održavanje koda: Semantičke oznake dokumentuju strukturu same po sebi. Programer koji čita kod odmah razume svrhu bloka, bez potrebe za detaljnim proučavanjem stilova ili komentara.

Ukratko: <div> je pogodan za grupisanje elemenata kada semantika nije važna (npr. za primenu stilova). <section> i <header> nose značenje i čine veb stranice razumljivijim i za mašine i za ljude.

Primer:

<!-- Semantički ispravna struktura -->
<header>
  <h1>Ime sajta</h1>
  <nav>
    <ul>
      <li><a href="#">Link</a></li>
    </ul>
  </nav>
</header>

<section>
  <h2>Naslov odeljka</h2>
  <p>Sadržaj odeljka...</p>
</section>

<!-- Primer korišćenja div, koji ne prenosi semantiku -->
<div> <!-- header? odeljak? nepoznato -->
  <h1>Ime sajta</h1>
  <div> <!-- navigacija? -->
    <ul>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

<div> <!-- odeljak? -->
  <h2>Naslov odeljka</h2>
  <p>Sadržaj odeljka...</p>
</div>