Niyə section və header etiketləri yerinə adi div etiketlərindən istifadə edə bilmirik?

Semantik etiketlər <section> və <header> istifadə etmək, ümumi <div> yerinə, kodun əlçatanlığını və oxunaqlığını yaxşılaşdırır.

1. Əlçatanlıq: Ekran oxuyucular və digər köməkçi texnologiyalar, məzmunun strukturunu başa düşmək üçün semantik etiketlərdən istifadə edir. <header> giriş hissəsini (məsələn, loqo, naviqasiya) göstərir, <section> isə tematik blokdur. <div> özü semantik yük daşımır.

2. SEO (Axtarış motoru optimallaşdırması): Axtarış motorları, semantik etiketlərlə strukturlaşdırılmış məzmunu daha yaxşı indeksləyir, bu da sıralaməni yaxşılaşdıra bilər.

3. Kodun oxunması və saxlanması: Semantik etiketlər, strukturu özləri sənədləşdirir. Kodu oxuyan inkişafçı, blokun məqsədini dərhal başa düşür, stil və ya şərhlərə ehtiyac olmadan.

Qısaca: <div> elementləri qruplaşdırmaq üçün uyğundur, semantika vacib deyilsə (məsələn, stil tətbiqi üçün). <section> və <header> isə mənanı daşıyır və veb səhifələri həm maşınlar, həm də insanlar üçün daha anlaşılan edir.

Nümunə:

<!-- Semantik düzgün struktur -->
<header>
  <h1>Sayt adı</h1>
  <nav>
    <ul>
      <li><a href="#">Link</a></li>
    </ul>
  </nav>
</header>

<section>
  <h2>Fəsil başlığı</h2>
  <p>Fəsil məzmunu...</p>
</section>

<!-- div istifadə nümunəsi, semantika daşımır -->
<div> <!-- header? section? məlum deyil -->
  <h1>Sayt adı</h1>
  <div> <!-- naviqasiya? -->
    <ul>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

<div> <!-- section? -->
  <h2>Fəsil başlığı</h2>
  <p>Fəsil məzmunu...</p>
</div>