Veb inkişafı kontekstində semantika nədir?

Veb inkişafında semantik HTML istifadə etmək onların mənasına uyğun olmalıdır, yalnız stil üçün deyil. Bu, məzmunun quruluşunu və mənasını təsvir etməyə kömək edir və veb səhifəni brauzerlər, axtarış motorları, ekran oxuyucuları və digər analizçilər üçün daha başa düşülən edir.

Semantik işarələmənin əsas üstünlükləri:

• Əlçatanlıq: Ekran oxuyucuları istifadə edən əlillər üçün saytla qarşılıqlı əlaqəni yaxşılaşdırır.
• SEO: Axtarış motorlarının səhifənin quruluşunu və məzmununu daha yaxşı başa düşməsinə kömək edir, bu da reytinqə müsbət təsir göstərir.
• Təmir və baxım: Kodu daha oxunaqlı və başa düşülən edir.
• Uyğunluq: Məzmunun müxtəlif cihazlarda və brauzerlərdə düzgün göstərilməsini təmin edir.

HTML5-də semantik etiketlərin nümunələri:

• <header>: Bütün sənəd və ya müəyyən bir bölmə üçün giriş və ya naviqasiyanı təmsil edir.
• <nav>: Nəqliyyat bağlantıları qrupunu təmsil edir.
• <main>: Sənədin əsas məzmununu təmsil edir.
• <article>: Tam və müstəqil məzmun parçasını təmsil edir (məsələn, blog yazısı, xəbər).
• <section>: Sənəddə müstəqil məzmun bölməsini təmsil edir.
• <aside>: Əsas məzmunla dolayı əlaqəli olan məzmunu təmsil edir (məsələn, yan panel).
• <footer>: Bütün sənəd və ya müəyyən bir bölmə üçün altbilgini təmsil edir.
• <figure> və <figcaption>: Media elementini (şəkil, diaqram və s.) və onun təsvirini təmsil edir.
• <time>: Tarix və vaxtı təmsil edir.

Semantik və qeyri-semantik yanaşma arasındakı müqayisə:

Qeyri-semantik	Semantik
Hər şey üçün <div> və <span> istifadə etmək	Xüsusi etiketlər (<header>, <nav>, <article>) istifadə etmək
Strukturun təsviri üçün siniflərdən (class="header") istifadə etmək	Strukturı təbii şəkildə təsvir edən etiketlərdən istifadə etmək
CSS-ə bağlılıq	HTML kodundan struktur başa düşülür

Qeyri-semantik markup nümunəsi:

<!-- non-semantic.html -->
<div class="header">
  <div class="logo"></div>
  <div class="nav">
    <ul>
      <li><a href="#">Əsas səhifə</a></li>
      <li><a href="#">Haqqında</a></li>
    </ul>
  </div>
</div>
<div class="content">
  <div class="article">
    <h2>Başlıq</h2>
    <p>Məzmun...</p>
  </div>
</div>
<div class="footer">
  <p>&copy; 2023</p>
</div>

Semantik markup nümunəsi:

<!-- semantic.html -->
<header>
  <img src="logo.png" alt="Logo">
  <nav>
    <ul>
      <li><a href="#">Əsas səhifə</a></li>
      <li><a href="#">Haqqında</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h2>Başlıq</h2>
    <p>Məzmun...</p>
  </article>
</main>
<footer>
  <p>&copy; 2023</p>
</footer>

Semantik markup CSS ilə stil vermək üçün yerini tutmur, lakin HTML sənədini müxtəlif məzmun istifadəçiləri üçün daha məlumatlı və faydalı edir.