Kāpēc mēs nevaram izmantot parastās div tagus vietā section un header tagiem?

Semantisko tagu <section> un <header> izmantošana vietā universālā <div> uzlabo pieejamību un koda lasāmību.

1. Pieejamība (Accessibility): Skrīnerī un citās palīgtehnoloģijās izmanto semantiskos tagus, lai saprastu satura struktūru. <header> apzīmē ievada daļu (piemēram, logotipu, navigāciju), <section> — tematisko bloku. <div> pats par sevi nesniedz semantisku nozīmi.

2. SEO (Search Engine Optimization): Meklētājprogrammas labāk indeksē saturu, kas strukturēts ar semantiskajiem tagiem, kas var uzlabot rangu.

3. Lasāmība un uzturēšana: Semantiskie tagi pašiem dokumentē struktūru. Izstrādātājs, lasot kodu, uzreiz saprot bloka nozīmi, neiedziļinoties stilā vai komentāros.

Kopsavilkums: <div> ir piemērots elementu grupēšanai, kad semantika nav svarīga (piemēram, stilu piemērošanai). <section> un <header> nes nozīmi un padara tīmekļa lapas saprotamākas gan mašīnām, gan cilvēkiem.

Piemērs:

<!-- Semantiski pareiza struktūra -->
<header>
  <h1>Vietnes nosaukums</h1>
  <nav>
    <ul>
      <li><a href="#">Saite</a></li>
    </ul>
  </nav>
</header>

<section>
  <h2>Segmenta virsraksts</h2>
  <p>Segmenta saturs...</p>
</section>

<!-- Piemērs ar div, kas nesniedz semantiku -->
<div> <!-- header? section? nav zināms -->
  <h1>Vietnes nosaukums</h1>
  <div> <!-- navigācija? -->
    <ul>
      <li><a href="#">Saite</a></li>
    </ul>
  </div>
</div>

<div> <!-- section? -->
  <h2>Segmenta virsraksts</h2>
  <p>Segmenta saturs...</p>
</div>