HTML semantik belgilash nima?

Savol

Semantik HTML nima va u nega muhim?

Qisqa javob

Semantik belgilash — bu HTML teglarini hamma narsa uchun universal <div> o'rniga o'z ma'no vazifasiga mos ishlatish (<header>, <nav>, <main>, <article>, <footer>).

Batafsil javob

Semantik teglar mazmunning faqat tashqi ko'rinishini emas, balki ma'nosini tasvirlaydi. Bu uch asosiy afzallikni beradi:

1. Qulaylik (accessibility) — skrinriderlar sahifa xaritasini qurish uchun semantik teglardan foydalanadi, bu ko'rish qobiliyati cheklangan foydalanuvchilarga bo'limlar orasida tez harakatlanish imkonini beradi.
2. SEO — qidiruv tizimlari mazmunning tuzilishi va ahamiyatini yaxshiroq tushunadi (masalan, <article> mustaqil material haqida signal beradi).
3. Kodning qo'llab-quvvatlanuvchanligi — <nav>, <aside>, <section> belgilashi sahifa tuzilishini boshqa dasturchilar uchun o'zi hujjatlashtiradi.

Bir nechta semantika namunasi:

• <header> — sahifa yoki bo'lim shapkasi.
• <nav> — navigatsiya bloki.
• <main> — sahifaning asosiy noyob mazmuni (sahifada bitta bo'lishi kerak).
• <article> — mustaqil, alohida tarqatilishi mumkin bo'lgan blok (post, mahsulot kartochkasi).
• <section> — odatda sarlavhali mavzu bo'yicha mazmun guruhi.
• <aside> — ikkinchi darajali mazmun (yon panel, qo'shimcha ma'lumot).
• <footer> — sahifa yoki bo'lim pastki qismi (footer).

Misol

<body>
  <header>
    <nav>...</nav>
  </header>

  <main>
    <article>
      <h1>Maqola sarlavhasi</h1>
      <section>...</section>
    </article>
    <aside>O'xshash maqolalar</aside>
  </main>

  <footer>© 2026</footer>
</body>

Qo'shimcha savollar

• <section> va <div> o'rtasida qanday farq bor?
• Sahifada bir nechta <main> tegi bo'lishi mumkinmi?
• Semantika SEO'ga qanday ta'sir qiladi?