Neden section ve header etiketleri yerine normal div…

Semantiksel <section> ve <header> etiketlerinin kullanımı, evrensel <div> yerine, kodun erişilebilirliğini ve okunabilirliğini artırır.

Erişilebilirlik: Ekran okuyucular ve diğer yardımcı teknolojiler, içerik yapısını anlamak için semantik etiketleri kullanır. <header> giriş bölümünü (örneğin, logo, gezinme) belirtir, <section> ise tematik bloğu temsil eder. <div> kendi başına semantik yük taşımaz.
SEO (Arama Motoru Optimizasyonu): Arama motorları, semantik etiketlerle yapılandırılmış içeriği daha iyi indeksler, bu da sıralamayı iyileştirebilir.
Kodun okunabilirliği ve bakımı: Semantik etiketler, yapıyı kendileri belgeleyen bir şekilde kullanılır. Kodu okuyan geliştirici, bloğun amacını hemen anlar, stil veya yorumlara bakmadan.

Özetle: <div>, semantik önemi önemli olmayan gruplamalar için uygundur (örneğin, stil uygulaması için). <section> ve <header> ise anlam yükü taşır ve web sayfalarını hem makineler hem de insanlar için daha anlaşılır kılar.

Örnek:

<!-- Semantik olarak doğru yapı -->
<header>
  <h1>Site Adı</h1>
  <nav>
    <ul>
      <li><a href="#">Bağlantı</a></li>
    </ul>
  </nav>
</header>

<section>
  <h2>Bölüm Başlığı</h2>
  <p>Bölüm içeriği...</p>
</section>

<!-- div kullanımı örneği, semantik iletmiyor -->
<div> <!-- header? section? belli değil -->
  <h1>Site Adı</h1>
  <div> <!-- nav? -->
    <ul>
      <li><a href="#">Bağlantı</a></li>
    </ul>
  </div>
</div>

<div> <!-- section? -->
  <h2>Bölüm Başlığı</h2>
  <p>Bölüm içeriği...</p>
</div>

Neden section ve header etiketleri yerine normal div etiketleri kullanamıyoruz?