HTML-də semantik elementlər nədir və onlar nə üçün lazımdır?

HTML-də semantik elementlər (<header>, <nav>, <article>, <aside>, <footer>, <section>, <main>, <figure>, <figcaption>, <time>, <mark>, <summary>, <details>) onların əhatə etdiyi məzmunun mənasını təsvir edir, yalnız onun görünüşünü deyil.

Əsas məqsəd:

• Əlçatanlıq: Köməkçi texnologiyaların (ekran oxuyucuların) səhifənin quruluşunu və məzmununu başa düşməsinə kömək edir, bu da məzmunu məhdudiyyətləri olan istifadəçilər üçün əlçatan edir.
• SEO (Axtarış mühərriklərinin optimallaşdırılması): Semantik markup ilə səhifələr daha yaxşı indeksləşdirilir və sıralanır, çünki onlar əsas məzmunu və onun sorğularla əlaqəsini daha dəqiq müəyyən edə bilirlər.
• İnkişaf və dəstək: Kodun oxunaqlığını və saxlanmasını yaxşılaşdırır, səhifənin quruluşunu digər inkişafçılar üçün (və gələcəkdə özünüz üçün) daha başa düşülən edir.
• Quruluşun daha yaxşı anlaşılması: Səhifənin məntiqi bloklarını (naviqasiya, əsas məzmun, altbilgi və s.) aydın şəkildə ayırmağa imkan verir.

Nümunə qeyri-semantik markup:

<div>
  <h2>Məqalə başlığı</h2>
  <p>Məqalənin məzmunu...</p>
</div>
<div>
  <h3>Yan panel</h3>
  <p>Yan panel haqqında məlumat...</p>
</div>

Nümunə semantik markup:

<article>
  <h2>Məqalə başlığı</h2>
  <p>Məqalənin məzmunu...</p>
</article>
<aside>
  <h3>Yan panel</h3>
  <p>Yan panel haqqında məlumat...</p>
</aside>

Semantik elementlərin istifadəsi daha strukturlaşdırılmış, əlçatan və axtarış mühərrikləri üçün optimallaşdırılmış veb səhifələrin yaradılmasına kömək edir.