Semantik HTML Frontend

Semantik HTML

100-dən çox HTML elementi və özəl elementlər yaratmaq imkanı ilə, məzmununuzu işarələmək üçün sonsuz yollar mövcuddur; amma bəzi yollar—xüsusilə semantik yollar—digər yollarla müqayisədə daha yaxşıdır.

Semantik “mənaya aid olan” deməkdir. Semantik HTML yazmaq, HTML elementlərindən istifadə edərək məzmununuzu hər bir elementin mənasına əsaslanaraq strukturlaşdırmaqdır, yalnız görünüşünə deyil.

Bu seriyada hələ çox HTML elementi əhatə edilməyib, amma HTML bilikləriniz olmasa da, aşağıdakı iki kod parçası semantik işarələmənin necə məzmunu kontekstləşdirə biləcəyini göstərir. Hər iki nümunə “thirty words”u 30 sözə genişləndirərək təsəvvür etməyiniz üçün mətnlərə əsaslanır:

İlk kod parçası, semantik dəyəri olmayan və elementlərini istifadə edir:

<div>
  <span>Three words</span>
  <div>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </div>
</div>
<div>
  <div>
    <div>five words</div>
  </div>
  <div>
    <div>three words</div>
    <div>forty-six words</div>
    <div>forty-four words</div>
  </div>
  <div>
    <div>seven words</div>
    <div>sixty-eight words</div>
    <div>forty-four words</div>
  </div>
</div>
<div>
   <span>five words</span>
</div>

Bu sözlərin nə olduğunu təxmin edə bilirsinizmi? Həqiqətən deyil.

Gəlin bu kodu semantik elementlərlə yenidən yazıq:

<header>
  <h1>Three words</h1>
  <nav>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </nav>
</header>
<main>
  <header>
    <h1>five words</h1>
  </header>
  <section>
    <h2>three words</h2>
    <p>forty-six words</p>
    <p>forty-four words</p>
  </section>
  <section>
    <h2>seven words</h2>
    <p>sixty-eight words</p>
    <p>forty-four words</p>
  </section>
</main>
<footer>
  <p>five words</p>
</footer>

Hansı kod blokunda məna var? Yalnız və semantik elementlərindən istifadə edərək, birinci kod blokundakı məzmunun nəyi təmsil etdiyini anlamaq mümkün deyil. İkinci kod nümunəsi isə semantik elementlər ilə, məzmunun məqsədini və mənasını başa düşmək üçün heç HTML etiketi ilə qarşılaşmamış bir insan üçün belə kifayət qədər kontekst təmin edir. Həmçinin, inkişaf etdirici üçün səhifənin quruluşunu anlamaq mümkündür, hətta məzmunu, məsələn, xarici bir dildə olsa belə.

İkinci kod blokunda, semantik elementlər sayəsində biz arxitekturanı başa düşə bilərik, çünki bu elementlər mənalı və strukturludur. Birinci başlıq saytın bannerini təmsil edir və saytı adını göstərir. saytın alt hissəsidir; “beş söz” burada müəllif hüquqları və ya biznes ünvanı ola bilər.

Semantik işarələmə yalnız kodu oxumağı asanlaşdırmaq üçün deyil; ən əsası, avtomatlaşdırılmış alətlərin işarələməni başa düşməsinə kömək edir. İnkişaf etdirici alətləri semantik elementlərin necə maşınla oxunaqlı quruluş təqdim etdiyini göstərir.

Əlçatanlıq Obyekt Modeli (AOM)

Brauzer, alınan məzmunu analiz etdikcə, sənəd obyekt modelini (DOM) və CSS obyekt modelini (CSSOM) qurur. Eyni zamanda əlçatanlıq ağacını da qurur. Ekran oxuyucuları kimi köməkçi qurğular AOM-dən istifadə edərək məzmunu analiz edir və şərh edir. DOM sənəddəki bütün düyünlərin ağacıdır. AOM isə DOM-un semantik versiyası kimidir.

Semantic Elements və AOM

Firefox-un əlçatanlıq panelində, semantik HTML istifadə edilərkən DOM əlçatanlıq ağacı ilə müqayisə etmək mümkündür. Semantik HTML, brauzerlərdə istifadəçilərə daha aydın quruluş təqdim edərək əlçatanlığı yaxşılaşdırır.

SEO Üçün Semantik HTML-in Faydaları

1. SEO optimallaşdırması: Semantik HTML istifadə etmək, axtarış motorlarının səhifə məzmununu daha asan anlamasına kömək edir.

2. Əlçatanlıq: Ekran oxuyucular üçün məzmunu asanlıqla başa düşülən edir.

3. Kodun oxunaqlılığı: Semantik elementlər kodun başa düşülməsini asanlaşdırır və saxlanmasını daha rahat edir.