HTML

Semantik HTML

Endi teglarni bilamiz. Lekin ularni to'g'ri ishlatish ham muhim. Semantik HTML — bu har bir teg o'zining ma'nosiga mos ishlatilishi. Ushbu darsda semantik teglar nima, nega ular muhim va sahifani qanday to'g'ri tuzishni o'rganamiz.

Semantika nima va nega muhim?

"Semantika" — bu ma'no degani. Semantik HTML — bu teglarni faqat ko'rinishi uchun emas, balki mazmuniga qarab tanlash. Masalan, sarlavha uchun <h1> ishlatiladi, chunki u sarlavha ma'nosini bildiradi — nafaqat matnni kattalashtiradi.

Taqqoslash uchun ikkita variantni ko'ring. Birinchisi — nosemantik (hamma joyda div):

<div class="header">
  <div class="logo">Mening saytim</div>
  <div class="menu">...</div>
</div>
<div class="main">
  <div class="article">Maqola matni...</div>
</div>
<div class="footer">© 2026</div>

Ikkinchisi — semantik (har bir bo'lak o'z tegi bilan):

<header>
  <div class="logo">Mening saytim</div>
  <nav>...</nav>
</header>
<main>
  <article>Maqola matni...</article>
</main>
<footer>© 2026</footer>

Ikkala variant ekranda bir xil ko'rinadi. Lekin ikkinchisi — brauzerga, qidiruv tizimlariga va ekran o'quvchi dasturlarga har bir bo'lak nima ekanini aytadi. Bu — katta farq.

Asosiy semantik teglar

HTML5 sahifaning turli qismlari uchun maxsus teglar taqdim etadi. Ular bir sahifaning odatiy tuzilishini tasvirlaydi:

header — sahifa yoki bo'lim boshi

<header> — sahifaning yoki alohida bo'limning yuqori qismi. Odatda logotip, sayt nomi va asosiy menyu shu yerda bo'ladi:

<header>
  <h1>Mening blogim</h1>
  <p>Dasturlash haqida maqolalar</p>
</header>

nav — navigatsiya (menyu)

<nav> — sahifadagi asosiy navigatsiya havolalari (menyu) uchun. Ekran o'quvchi dasturlar foydalanuvchiga to'g'ridan-to'g'ri menyuga o'tish imkonini beradi:

<nav>
  <a href="/">Bosh sahifa</a>
  <a href="/about">Biz haqimizda</a>
  <a href="/contact">Aloqa</a>
</nav>

main — asosiy mazmun

<main> — sahifaning asosiy, noyob mazmuni. Har bir sahifada faqat bitta <main> bo'lishi kerak. Unga menyu, footer kabi har sahifada takrorlanadigan narsalar kirmaydi:

<main>
  <h1>Maqola sarlavhasi</h1>
  <p>Sahifaning asosiy matni shu yerda.</p>
</main>

section — mantiqiy bo'lim

<section> — mazmunning bir mantiqiy bo'limi. Har bir section odatda o'z sarlavhasiga ega bo'ladi:

<section>
  <h2>Bizning xizmatlarimiz</h2>
  <p>Xizmatlar tavsifi...</p>
</section>
<section>
  <h2>Mijozlar fikri</h2>
  <p>Sharhlar...</p>
</section>

article — mustaqil kontent

<article> — mustaqil, o'zicha ma'noga ega kontent bo'lagi. Uni kontekstdan ajratib olsa ham mantiqiy bo'ladi. Masalan: blog posti, yangilik, mahsulot kartochkasi, foydalanuvchi izohi:

<article>
  <h2>HTML nima?</h2>
  <p>HTML — bu belgilash tili...</p>
  <p>Muallif: Ali Valiyev</p>
</article>
section va article farqi: article — o'zicha to'liq ma'noga ega (yolg'iz o'zi ham tushunarli, masalan bitta yangilik). section — kattaroq narsaning bir qismi (masalan, saytning "Biz haqimizda" bo'limi). Agar bo'lakni RSS'ga qo'shsa yoki boshqa joyga ko'chirsa mantiqli bo'lsa — bu article.

aside — yon mazmun

<aside> — asosiy mazmun bilan bog'liq, lekin ikkinchi darajali kontent: yon panel (sidebar), reklama, tegishli havolalar:

<aside>
  <h3>Tegishli maqolalar</h3>
  <ul>
    <li><a href="#">CSS asoslari</a></li>
    <li><a href="#">JavaScript kirish</a></li>
  </ul>
</aside>

footer — sahifa yoki bo'lim oxiri

<footer> — sahifaning yoki bo'limning pastki qismi. Odatda mualliflik huquqi, aloqa ma'lumotlari va qo'shimcha havolalar shu yerda bo'ladi:

<footer>
  <p>© 2026 Mening saytim. Barcha huquqlar himoyalangan.</p>
</footer>

To'liq semantik sahifa tuzilishi

Barcha semantik teglar birlashganda, tipik sahifa quyidagicha ko'rinadi:

<body>
  <header>
    <h1>Mening saytim</h1>
    <nav>
      <a href="/">Bosh sahifa</a>
      <a href="/blog">Blog</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Birinchi maqola</h2>
      <p>Maqola matni shu yerda...</p>
    </article>

    <aside>
      <h3>Reklama</h3>
      <p>Yon paneldagi qo'shimcha ma'lumot.</p>
    </aside>
  </main>

  <footer>
    <p>© 2026 Mening saytim</p>
  </footer>
</body>

Foydalanish qulayligi (a11y) asoslari

A11y — bu "accessibility" so'zining qisqartmasi (a + 11 harf + y). U saytni nogironligi bor odamlar ham qulay ishlata olishini anglatadi. Masalan, ko'zi ojiz foydalanuvchilar ekran o'quvchi (screen reader) dasturlar orqali saytni "eshitadi".

Semantik teglar a11y'ga bevosita yordam beradi:

Boshqa muhim a11y qoidalari:

A11y — bu nafaqat nogironlar uchun. Yaxshi a11y hamma uchun saytni qulayroq qiladi: klaviatura bilan navigatsiya, sekin internetda ham ishlaydigan alt matnlar va aniq tuzilish barcha foydalanuvchilarga foyda keltiradi.

SEO uchun foydasi

SEO (Search Engine Optimization) — saytni qidiruv tizimlarida (Google, Yandex) yuqori o'ringa chiqarish. Google robotlari sahifani o'qiganda, semantik teglar ularga mazmunni tushunishga yordam beradi:

Natijada semantik jihatdan yaxshi tuzilgan sahifa qidiruv natijalarida yuqoriroq chiqishi mumkin. Nosemantik, faqat div'lardan iborat sahifada esa robot mazmunni tushunishga qiynaladi.

"div sho'rvasi"dan qochish

"Div sho'rvasi" (div soup) — bu butun sahifa faqat <div> teglaridan iborat bo'lgan holat. Bunday kodni o'qish qiyin, u a11y va SEO uchun yomon:

<div class="page">
  <div class="top">
    <div class="brand">Sayt</div>
    <div class="links">
      <div class="link">Bosh sahifa</div>
    </div>
  </div>
</div>

Bu kod ishlaydi, lekin hech qanday ma'no tashimaydi — barcha div'lar bir xil. To'g'ri yondashuv — ma'noga mos semantik teglarni ishlatish:

<header>
  <div class="brand">Sayt</div>
  <nav>
    <a href="/">Bosh sahifa</a>
  </nav>
</header>
<div> yomon teg emas! U hali ham kerak — sof bezak yoki joylashuv uchun (masalan, CSS bilan bir necha elementni guruhlash). Lekin agar bo'lak uchun mos semantik teg mavjud bo'lsa (header, nav, article...), o'shani ishlating. div — bu "boshqa hech narsa mos kelmaganda" tanlanadigan zaxira variant.

Amaliy maslahatlar

Sahifa yozayotganda o'zingizga savol bering: "Bu bo'lak nima?":

Xulosa