De ce nu putem folosi etichete div normale în loc de etichetele section și header?

Utilizarea etichetelor semantice <section> și <header> în locul <div>-ului universal îmbunătățește accesibilitatea și lizibilitatea codului.

1. Accesibilitate: Cititoarele de ecran și alte tehnologii de asistență folosesc etichete semantice pentru a înțelege structura conținutului. <header> indică partea introductivă (de exemplu, logo, navigație), <section> este un bloc tematic. <div> nu are în sine o încărcătură semantică.

2. SEO (Optimizarea pentru motoarele de căutare): Motoarele de căutare indexează mai bine conținutul structurat cu etichete semantice, ceea ce poate îmbunătăți poziția.

3. Citibilitatea și întreținerea codului: Etichetele semantice documentează structura de sine stătător. Dezvoltatorul care citește codul înțelege imediat scopul blocului, fără a se adânci în stiluri sau comentarii.

Pe scurt: <div> este potrivit pentru gruparea elementelor atunci când semantica nu este importantă (de exemplu, pentru aplicarea stilurilor). <section> și <header> au o încărcătură semantică și fac paginile web mai ușor de înțeles atât pentru mașini, cât și pentru oameni.

Exemplu:

<!-- Structură semantic corectă -->
<header>
  <h1>Numele site-ului</h1>
  <nav>
    <ul>
      <li><a href="#">Link</a></li>
    </ul>
  </nav>
</header>

<section>
  <h2>Titlul secțiunii</h2>
  <p>Conținutul secțiunii...</p>
</section>

<!-- Exemplu de utilizare a div, care nu transmite semantică -->
<div> <!-- header? secțiune? necunoscut -->
  <h1>Numele site-ului</h1>
  <div> <!-- navigație? -->
    <ul>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

<div> <!-- secțiune? -->
  <h2>Titlul secțiunii</h2>
  <p>Conținutul secțiunii...</p>
</div>