Semantik HTML Yazmağa Bələdçi

Veb inkişafına yeni başlamısınızsa, “Semantik HTML” termini ilə qarşılaşmış ola bilərsiniz və bu, nə demək olduğunu düşünə bilərsiniz. Qısa desək, Semantik HTML, veb səhifəsinin məzmununun yalnız görünüşünü deyil, məzmununun mənasını ifadə etmək üçün HTML işarələməsindən istifadə etməyi nəzərdə tutur.

Bu yanaşmanın bir neçə üstünlüyü vardır. Birincisi, axtarış motorlarının və digər texnologiyaların veb saytınızdakı məzmunun strukturunu və məqsədini anlamağa kömək edir. İkincisi, bu yanaşma məzmunu, vebdə gəzinti edən köməkçi texnologiyalar istifadə edən insanlar üçün daha əlçatan edir. Üçüncüsü isə, hər bir elementin məqsədi aydın olduğundan kodu oxumağı və saxlanmasını asanlaşdırır.

Bu məqalədə, semantik HTML etiketlərindən bəhs edəcəyik və onları effektiv şəkildə necə istifadə edəcəyinizi göstərəcəyik.

Header (Başlıq)

etiketi, veb səhifəsinin üst hissəsini işarələmək üçün istifadə edilir. Bu hissə ümumiyyətlə əsas başlıq və ya loqo, naviqasiya bağlantıları və saytın hər səhifəsində olan digər ümumi elementləri əhatə edir.  etiketi ilə, başlıq ilə səhifənin əsas məzmunu arasında aydın bir ayırıcı yarada bilərsiniz, bu da istifadəçilər üçün saytınızın naviqasiyasını daha asanlaşdırır.

<!-- Semantik olmayan başlıq -->
<div class="header">
  <h1>Saytım</h1>
  <nav>
    <a href="#">Ana Səhifə</a>
    <a href="#">Haqqında</a>
    <a href="#">Əlaqə</a>
  </nav>
</div>

<!-- Semantik başlıq -->
<header>
  <h1>Saytım</h1>
  <nav>
    <ul>
      <li><a href="#">Ana Səhifə</a></li>
      <li><a href="#">Haqqında</a></li>
      <li><a href="#">Əlaqə</a></li>
    </ul>
  </nav>
</header>

Navigation (Naviqasiya)

etiketi, veb səhifəsinin naviqasiya bağlantılarının yerləşdiyi hissəni işarələmək üçün istifadə olunur.  etiketi ilə, həm istifadəçilərə, həm də axtarış motorlarına bu bölmənin naviqasiya üçün nəzərdə tutulduğunu göstərə bilərsiniz.

<!-- Semantik olmayan naviqasiya -->
<div class="navigation">
  <a href="#">Ana Səhifə</a>
  <a href="#">Haqqında</a>
  <a href="#">Əlaqə</a>
</div>

<!-- Semantik naviqasiya -->
<nav>
  <ul>
    <li><a href="#">Ana Səhifə</a></li>
    <li><a href="#">Haqqında</a></li>
    <li><a href="#">Əlaqə</a></li>
  </ul>
</nav>

Main (Əsas Məzmun)

etiketi, veb səhifəsinin əsas məzmun sahəsini işarələmək üçün istifadə edilir.  etiketi ilə, həm istifadəçilərə, həm də axtarış motorlarına səhifənizin əsas məzmununun harada olduğunu aydın şəkildə göstərə bilərsiniz.

<!-- Semantik olmayan əsas məzmun -->
<div class="main-content">
  <h2>Haqqımızda</h2>
  <p>Biz widget istehsal edən bir şirkətik.</p>
</div>

<!-- Semantik əsas məzmun -->
<main>
  <h2>Haqqımızda</h2>
  <p>Biz widget istehsal edən bir şirkətik.</p>
</main>

Article (Məqalə)

etiketi, müstəqil bir məzmun parçasını təmsil etmək üçün istifadə olunur, məsələn, blog yazısı, xəbər məqaləsi və ya məhsul icmalı.  etiketi içindəki məzmun özbaşına mənalı olmalı və başlıqlar, paragraflar, şəkillər və digər məzmun növlərini əhatə edə bilər.

<!-- Semantik olmayan məqalə -->
<div class="article">
  <h2>Widget Necə Hazırlanır</h2>
  <p>Widget-lar çox faydalıdır. İstifadə etmək üçün necə hazırladığınızı öyrənin.</p>
</div>

<!-- Semantik məqalə -->
<article>
  <h2>Widget Necə Hazırlanır</h2>
  <p>Widget-lar çox faydalıdır. İstifadə etmək üçün necə hazırladığınızı öyrənin.</p>
</article>

Footer (Alt Hissə)

etiketi, veb səhifəsinin alt hissəsini işarələmək üçün istifadə olunur. Bu hissə, müəllif hüquqları, əlaqə məlumatları və sosial media bağlantıları kimi elementləri əhatə edə bilər.

<!-- Semantik olmayan alt hissə -->
<div class="footer">
  <p>&copy; 2021 Saytım</p>
</div>

<!-- Semantik alt hissə -->
<footer>
  <p>&copy; 2021 Saytım</p>
</footer>

SEO Üçün Semantik HTML-in Faydaları

1. Axtarış Motoru Optimallaşdırması (SEO): Semantik HTML, axtarış motorlarının səhifə məzmununu daha asan anlamasına və bu sayədə daha yaxşı indeksləməsinə kömək edir.

2. Əlçatanlıq: Köməkçi texnologiyalardan istifadə edən insanlar üçün məzmunu daha əlçatan edir.

3. Kodun Oxunaqlılığı: Semantik HTML kodunu oxumaq və idarə etmək daha asan olur.

Pulsuz digər resurslar:

Məqalə: W3Schools: Semantik HTML

Məqalə: Semantik HTML – web.dev

Video: Niyə və Həddi nə vaxt Semantik HTML Elementlərindən Div(lər)dən üstün istifadə etməliyik

Növbəti mövzular:

SEO-nun Əsasları

Əlçatanlıq

Formlar və Doğrulamalar

HTML Əsasları

Açar sözlər: Semantik HTML, SEO optimallaşdırması, veb inkişaf, HTML etiketləri, axtarış motoru optimallaşdırması, əlçatanlıq