Seriya: HTML Basics Dars 6

Semantics — div bilan ishlaydigan emas, ma'no bilan fikrlaydigan frontend

HTML semantikasini o'rganing: nega faqat bitta main, section va article orasidagi haqiqiy farq, nav ichida nima bo'lishi mumkin yoki mumkin emas, qachon div to'g'ri tanlov, va semantika SEO va screen reader'da qanday ishlaydi.

6-dars

SEMANTICS

div bilan ishlaydigan emas, ma'no bilan fikrlaydigan frontend yozish. kod faqat ko'rinish emas, ma'noni ham tashiydi.

1️⃣ main — nega faqat bitta?

Qoidaning sababi

<main> — sahifaning asosiy noyob kontenti

Screen reader va assistive texnologiyalar to'g'ridan-to'g'ri <main> ga sakraydi

SEO botlar uchun ham asosiy signal

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

  <main>
    <!-- sahifaning yagona, asosiy mazmuni -->
  </main>

  <footer>...</footer>
</body>

❌ Xato fikr: "Har bir katta blokga main bersam bo'ladimi?"

✅ To'g'ri: Yo'q. <main> — 1 dona, <article>/<section> — ko'p bo'lishi mumkin.

2️⃣ section vs article — real farq

Bu joyda ko'p developer chalkashadi.

article — mustaqil, ko'chirilsa ham ma'nosi yo'qolmaydi

  • Blog post
  • News item
  • Product card
  • Comment
  • GitHub issue
<article>
  <h2>Next.js App Router haqida</h2>
  <p>...</p>
</article>

👉 Bu blokni RSS ga, boshqa sahifaga yoki feed'ga qo'ysang — hali ham mantiqli.

section — mantiqiy bo'lim

  • Sahifa ichidagi tematik guruh
  • O'zi yolg'iz yashay olmaydi
<section>
  <h2>Frontend Roadmap</h2>

  <article>HTML</article>
  <article>CSS</article>
</section>

👉 <section> har doim sarlavha bilan kelishi kerak (h2–h6).

Oltin qoida

Agar uni alohida sahifaga olib chiqsa bo'lsa → <article>

Agar faqat shu sahifa kontekstida ma'noli bo'lsa → <section>

3️⃣ nav ichida nima bo'lishi mumkin / mumkin emas

Ruxsat etiladi ✅

  • Navigatsiya linklari
  • Menu
  • Pagination
  • Breadcrumbs
<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
</nav>

Ruxsat etilmaydi ❌

  • <article>
  • <section>
  • Oddiy kontent
  • <form> (agar u navigatsiya bo'lmasa)

❌ Xato:

<nav>
  <h2>About us</h2>
  <p>Biz 2020 yilda...</p>
</nav>

👉 Screen reader buni navigatsiya deb o'ylaydi — bu katta accessibility bug.

4️⃣ Qachon div — to'g'ri tanlov

<div> kerak bo'ladigan holatlar

  • Layout wrapper (grid, flex)
  • Styling uchun texnik container
  • Hech qanday semantik ma'no yo'q
<div class="card">
  <h3>Title</h3>
  <p>Text</p>
</div>

❌ Xato: hamma joyga <section>, <article> tiqish

✅ To'g'ri: ma'no yo'q joyda — <div>

Qoida: Semantics — ma'no haqida. Styling — <div> bilan hal qilinadi.

5️⃣ Semantics SEO va Screen Reader'da qanday ishlaydi

SEO

  • Google <article>, <main>, <nav> orqali kontent ierarxiyasini tushunadi
  • Semantic markup = kam JS, kam hack
  • Core Web Vitals'ga ham bilvosita ta'sir qiladi

Screen Reader

  • <main> → skip navigation
  • <nav> → navigation landmark
  • <article> → content unit
  • <section> → region

👉 Noto'g'ri semantics = faqat ko'rinadigan sayt ko'zi ojiz foydalanuvchilar uchun unusable

Yakuniy xulasa

HTML semantika — bu kodni chiroyli ko'rinishga keltirish emas, balki kodni ma'noli qilishdir.

Semantik HTML yozganingizda:

  • Search engine'lar kontentingizni yaxshiroq tushunadi
  • Screen reader'lar samarali navigatsiya qila oladi
  • Accessibility tabiiy bo'lib qoladi, "qo'shimcha ish" emas
  • Kodingiz osonroq maintain qilinadi va o'z-o'zidan dokumentatsiya bo'ladi

Eslatma: Kod faqat ko'rsatmaydi — u inson va mashinalarga ma'no yetkazadi.

Semantik elementlarni to'g'ri ishlatish — bu professional frontend dasturchining asosiy ko'nikmasidir. Har bir tag o'z ma'nosiga ega bo'lishi kerak, aks holda kod faqat "ishlaydi", lekin tushunish qiyin va maintain qilish mushkul bo'ladi.