Codecourse

HTML semantika

HTML teqlərinin əsas məqsədi sənədə məna verməkdir. Bu səbəbdən istifadə edəcəyiniz hər bir teqin mənasına diqqət yetirin.

Siz yazdığınız məzmundan asılı olaraq mətnin mənasına müvafiq element seçə bilərsiniz.

Struktur elementləri: səhifənin tərtibi

Struktur elementləri səhifənin əsas hissəsinin tərtibinə imkan verir. Bu elementlərin daxilində adətən başqa HTML elementləri yerləşdirilir.

Tipik veb səhifə aşağıdakı struktur elementlərini daxil edə bilər:

Mətn elementləri: məzmunun müəyyənləşdirilməsi

Struktur elementlərin daxilində məzmunun məqsədini müəyyənləşdirməyə imkan verən mətn elementlərindən istifadə edilir.

Siz əsasən aşağıdakı mətn elementləri ilə işləyəcəksiniz:

Sətir elementləri: fərqli mətnlər

Sətir elementləri mətnin bir hissəsini fərqləndirməyə imkan verir.

Siz adətən aşağıdakı sətir elementlərinə müraciət edəcəksiniz:

Aşağıdakı HTML kodunu oxumaqla hər bir HTML elementinin mənasını asanlıqla başa düşə bilərsiniz.

<article>
  <h1>Səhifənin əsas başlığı</h1>
  <h2>Altbaşlıq</h2>
  <p>Müxtəlif yazılar, <em>seçilmiş</em> və <strong>vacib</strong> sözlər.</p>
  <p>Başqa bir paraqraf</p>
  <ul>
    <li>Bir</li>
    <li>İki</li>
    <li>Üç</li>
  </ul>
  <blockquote>Bir dəfə dedi</blockquote>
</article>
<aside>
  <h3>Son mesajlar</h3>
  <ul>
    <li><a href="#">Bir</a></li>
    <li><a href="#">İki</a></li>
    <li><a href="#">Üç</a></li>
  </ul>
</aside>

Ümumi elementlər

Məzmununuz üçün heç bir semantik element uyğun gəlmədiyi halda qruplaşdırma və dizayn məqsədilə aşağıdakı iki ümumi HTML elementindən istifadə edə bilərsiniz:

Bu HTML elementləri heç bir məna ifadə etməsələr də, CSS texnologiyasından istifadə zamanı gərəkli olacaqlar.

Təxminən 100 semantik HTML elementi mövcuddur. Bu, çoxdur. Bu elementlər arasından məzmununuz üçün müvafiq element seçmək yorucu ola bilər.

İndiki mərhələdə aşağıdakı siyahıdakı elementlər sizə kifayətdir:

Struktur Mətn Sətir
<header> <p> <a>
<h1> <ul> <strong>
<h2> <ol> <em>
<h3> <li> <q>
<nav> <blockquote> <abbr>
<footer>   <small>
<article>    
<section>    

Növbəti dərsi seçib keçid düyməsinə sıxın: