CodeGym /Kurslar /Frontend SELF AZ /Əsas semantik taglər

Əsas semantik taglər

Frontend SELF AZ
Səviyyə , Dərs
Mövcuddur

1.1 Teq <header>

HTML5-in semantik teqləri developerlərə daha strukturlaşmış və oxunması asan sənədlər yaratmağa kömək edir, eyni zamanda accessibility və SEO-nu (axtarış motorunun optimizasiyası) yaxşılaşdırır. Bu teqlər veb-səhifənin strukturu və tərkibi haqqında daha aydın təsvir verir. Aşağıda əsas semantik teqləri ətraflı şəkildə müzakirə edəcəyik.

<header> teqi məzmunun və ya bölmənin başlığını təmsil etmək üçün istifadə olunur. Bu element adətən giriş məlumatlarını, naviqasiya linklərini, loqotipləri, başlıqları və məzmunun yuxarı hissəsi ilə bağlı digər elementləri ehtiva edir.

İstifadə nümunəsi:

HTML
    
      <header>
        <h1>Saytın Başlığı</h1>
        <nav>
          <ul>
            <li><a href="#home">Ana Səhifə</a></li>
            <li><a href="#about">Haqqında</a></li>
            <li><a href="#contact">Əlaqə</a></li>
          </ul>
        </nav>
      </header>
    
  

Əsas xüsusiyyətlər:

  1. Yerləşmə: <header> teqi həm bütün sənəd üçün, həm də ayrıca bölmələr üçün, məsələn, <article> və ya <section> daxilində istifadə oluna bilər.
  2. Tərkib: adətən başlıqları, loqotipləri, naviqasiya elementlərini və digər giriş elementlərini ehtiva edir.

1.2 Taq <footer>

<footer> təqi, məzmunun və ya bölmənin alt hissəsini göstərmək üçün istifadə olunur. Bu element adətən müəllif haqqında məlumat, əlaqəli sənədlərə keçidlər, məxfilik siyasəti, əlaqə məlumatı və məzmunun alt hissəsi ilə bağlı digər elementləri ehtiva edir.

İstifadə nümunəsi:

HTML
    
      <footer>
        <p>&copy; 2024 My Website</p>
        <nav>
          <ul>
            <li><a href="#privacy">Məxfilik siyasəti</a></li>
            <li><a href="#terms">Xidmət şərtləri</a></li>
          </ul>
        </nav>
      </footer>
    
  

Əsas xüsusiyyətlər:

  1. Yerləşdirmə: <footer> təqi həm bütün sənəd üçün, həm də <article> və ya <section> kimi ayrıca bölmələr üçün istifadə oluna bilər.
  2. Məzmun: adətən müəllif haqqında məlumatı, hüquqi məlumatları, naviqasiya keçidlərini və digər yekun elementləri ehtiva edir.

1.3 Teyq <article>

<article> teyi müstəqil, özünü təmin edən məzmun blokunu təmsil etmək üçün istifadə olunur. Bu məzmun bloqu paylanıla və təkrar istifadə oluna bilər. Bu, blog yazısı, xəbər məqaləsi, şərh, istifadəçi yazısı və s. ola bilər.

İstifadə nümunəsi:

HTML
    
      <article>
        <header>
          <h2>Blog Post Title</h2>
          <p>Published on July 6, 2024</p>
        </header>
        <p>This is the content of the blog post. It can include text, images, and other media.</p>
        <footer>
          <p>Author: John Doe</p>
        </footer>
      </article>
    
  

Əsas xüsusiyyətlər:

  1. Müstəqillik: <article> teyi müstəqil istifadə edilə bilən və yayıla bilən məzmun üçün istifadə olunur.
  2. Struktur: adətən başlıq (<header>), əsas məzmun və son bölmədən (<footer>) ibarətdir.

Tətbiq sahələri:

  • Məqalələr
  • Blog yazıları
  • Xəbərlər
  • Şərhlər

Üstünlüklər:

  • Müstəqil məzmun fraqmentlərini göstərir
  • Axtarış sistemləri və digər xidmətlər məzmunu müəyyənləşdirib təkrar istifadə edə bilər

1.4 Teyq <section>

<section> teyi məzmunun mövzu ilə əlaqəli qruplarını müəyyən etmək üçün istifadə olunur. Bu, fəsillər, bölmələr və ya digər geniş məzmun parçaları ola bilər. <div>, stilizasiya və qruplaşdırma üçün semantik mənası olmadan istifadə edildiyi halda, <section> aydın semantik mənası var.

İstifadə nümunəsi:

HTML
    
      <section>
        <header>
          <h2>About Us</h2>
        </header>
        <p>This section provides information about our company and its history.</p>
      </section>
    
  

Əsas xüsusiyyətlər:

  1. Mövzusal qruplaşdırma: <section> teyi məzmunun mövzulara görə qruplaşdırılması üçün istifadə edilir.
  2. Struktur: adətən başlıq (<header>) və əsas məzmundan ibarətdir.

Tətbiq sahələri:

  • Məqalə daxilində bölmələr
  • Mövzu ilə əlaqəli məzmun qrupları
  • Səhifənin məntiqli şəkildə ayrılmış hissələri

Üstünlüklər:

  • Sənədin strukturunu və oxunaqlığını yaxşılaşdırır
  • Axtarış sistemləri məzmunu daha yaxşı anlayıb indeksləşdirə bilər
Şərhlər
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION