HTML article, section yoki div: qaysi birini qachon tanlash

Qisqacha: article — o'zi alohida tura oladigan, boshqa joyga ko'chirilsa ham tushunarli kontent: maqola, yangilik, izoh, mahsulot kartochkasi. section — kattaroq narsaning sarlavhali mavzuviy qismi: sahifaning "Menyu", "Biz haqimizda" bo'limlari. Ikkalasi ham mos kelmasa — div. Sarlavha darajasi esa teglarning ichma-ichligiga emas, tuzilmaga qarab tanlanadi.

Bu darsda

• article ni boshqa teglardan ajratadigan asosiy savolni bilasiz.
• section ni qachon ishlatish va nega unga sarlavha kerakligini tushunasiz.
• Uch savollik algoritm bilan article, section va div dan birini tanlaysiz.
• Sarlavha va shior uchun hgroup ni ishlatasiz.
• "Har bir bo'limda h1" afsonasi nega noto'g'ri ekanini tushuntira olasiz.

Oldin bilishingiz kerak: Sahifa landmarklari, Sarlavhalar va paragraflar.

1. Nega bu kerak?

O'tgan darsda sahifani katta hududlarga bo'ldik: header, main, footer. Endi main ning ichiga qaraymiz. Choyxonaning bosh sahifasida: bir nechta bo'lim ("Menyu", "Tadbirlar", "Sharhlar"), sharhlar bo'limida — mijozlarning alohida izohlari.

Bular uchun uchta teg bor: article, section va div. Ular ko'pincha chalkashtiriladi — hatto tajribali dasturchilar ham. Bu dars — ularni ajratishning aniq algoritmi.

2. article — mustaqil kontent

2.1 Asosiy savol

article — o'zi mustaqil, alohida tarqatilsa ham to'liq ma'noli kontent. Tekshirish uchun savol:

"Bu blokni sahifadan olib, Telegram kanalga alohida post qilib qo'ysam — u tushunarli bo'ladimi?"

Ha bo'lsa — article. Masalan:

• Blog maqolasi yoki yangilik.
• Forumdagi post yoki izoh.
• Mijoz sharhi.
• Onlayn do'kondagi mahsulot kartochkasi.
• Mustaqil vidjet (masalan, ob-havo bloki).

article ni "maqola" deb tarjima qilish chalg'itadi. U "mustaqil kontent birligi" degani — bitta izoh ham article.

2.2 Misol: yangilik

<article>
  <header>
    <h2>Osh bayrami qanday o'tdi</h2>
    <p>Muallif: Malika,
    <time datetime="2026-10-06">6-oktabr</time></p>
  </header>
  <p>Kecha ertalab 500 dan ortiq mehmon keldi. Rustam aka
  ikki qozonda osh damladi.</p>
  <footer>
    <address>Muallif bilan bog'lanish:
    <a href="mailto:malika@example.com">
    malika@example.com</a></address>
  </footer>
</article>

Landmarklar darsida ko'rgandek, article ichidagi header va footer — maqolaning boshi va oxiri, sahifa landmarki emas.

address bu yerda — maqola muallifining kontakti. Iqtibos darsida aytgan edik: address eng yaqin article yoki butun sahifa egasining kontakti. Maqola ichida — maqola muallifi.

2.3 Ichma-ich article

Maqola ostidagi izohlar — har biri mustaqil kontent, lekin maqolaga tegishli. Ular maqolaning ichida article bo'ladi:

<article>
  <h2>Osh bayrami qanday o'tdi</h2>
  <p>...</p>

  <section>
    <h3>Izohlar</h3>
    <article>
      <p><b>Jasur:</b> Eng mazali osh shu yerda!</p>
    </article>
    <article>
      <p><b>Dilnoza:</b> Keyingi yil ham kelamiz.</p>
    </article>
  </section>
</article>

Ichki article — tashqisiga bog'liq kontent: izoh qaysi maqolaga yozilganini tuzilmaning o'zi aytadi.

Qisqa izohlarda sarlavha bo'lmasligi mumkin. Nu HTML Checker bunda "Article lacks heading" ("Maqolada sarlavha yo'q") deb ogohlantiradi — bu xato emas. Muallif ismini kichik sarlavha (h4) qilsangiz, ogohlantirish yo'qoladi va ekran o'quvchi izohlar orasida sakray oladi.

3. section — sarlavhali mavzuviy bo'lim

3.1 Nima u

section — kattaroq butunning mavzuviy qismi. U o'zi alohida tura olmaydi: "Tadbirlar" bo'limi choyxona sahifasidan ajratilsa, "kimning tadbirlari?" degan savol tug'iladi.

Choyxona bosh sahifasi:

<main>
  <h1>Choyxona «Bahor»</h1>

  <section>
    <h2>Bugungi menyu</h2>
    <p>Osh, lag'mon va manti.</p>
  </section>

  <section>
    <h2>Tadbirlar</h2>
    <p>5-oktabr — osh bayrami.</p>
  </section>

  <section>
    <h2>Mijozlar sharhlari</h2>
    <article>
      <p>Eng mazali osh! — Malika</p>
    </article>
  </section>
</main>

Uchta bo'lim — sahifa mundarijasining uchta bandi. Kitobdagi boblar kabi.

3.2 section ga sarlavha kerak

section ning asosiy belgisi — sarlavha. Sarlavha qo'yib bo'lmasa, bu ehtimol section emas. Nu HTML Checker ogohlantiradi:

Warning: Section lacks heading. Consider using “h2”-“h6” elements to add identifying headings to all sections, or else use a “div” element instead for any cases where no heading is needed.

Tarjimasi: "Bo'limda sarlavha yo'q. Hamma bo'limlarga h2–h6 bilan sarlavha qo'shishni o'ylab ko'ring, yoki sarlavha kerak bo'lmagan hollarda div ishlating." Validator o'zi div ni taklif qilyapti — bu tasodif emas.

Sarlavhali section accessibility daraxtida alohida hudud (region) bo'lishi ham mumkin — agar unga nom berilgan bo'lsa. Buning usulini ARIA asoslari darsida ko'ramiz.

Tekshirib ko'ring: Uch ustunli bezak uchun matnlarni guruhlaydigan blok — sarlavhasiz, faqat CSS uchun. section mi yoki div mi?

4. Tanlash algoritmi

Blok uchun teg tanlayotganda ketma-ket uchta savol:

Undan oldin esa — "nol-savol": aniqroq teg bormi? Menyu — nav, yon ma'lumot — aside, rasm va izoh — figure, asosiy kontent — main, ro'yxat — ul. Aniq teg topilsa — uch savolga yetib bormaysiz.

Algoritmni misollarda sinaymiz:

Bo'sh joyni to'ldiring: faqat CSS uchun kerak bo'lgan sarlavhasiz guruh —

5. hgroup — sarlavha va shior

Choyxona nomi va uning ostidagi shior: "Choyxona «Bahor»" va "1998-yildan beri Chilonzorda". Shiorni h2 qilish xato — u yangi bo'lim sarlavhasi emas. Oddiy p qilsak, uning sarlavhaga bog'liqligi yo'qoladi.

hgroup ularni birlashtiradi:

<hgroup>
  <h1>Choyxona «Bahor»</h1>
  <p>1998-yildan beri Chilonzorda</p>
</hgroup>

hgroup ichida — bitta sarlavha (h1–h6) va bir yoki bir nechta p (shior, qo'shimcha nom). Sarlavhalar tuzilmasida faqat h1 hisoblanadi — shior mundarijani buzmaydi.

Maslahat: Eski maqolalarda hgroup ichida ikkita sarlavhani (h1 va h2) ko'rishingiz mumkin. Bu — eski qoida, 2022-yilda o'zgargan. Bugun shior p bilan yoziladi.

6. "Outline algoritmi" afsonasi

Sarlavhalar darsida qisqa eslatgan edik — endi batafsil.

HTML5 paydo bo'lgan yillarda document outline algorithm ("hujjat mundarijasi algoritmi") degan g'oya bor edi. Unga ko'ra, har bir section va article o'z sarlavha darajasini "noldan" boshlaydi: har birining ichida h1 yozish mumkin, brauzer esa darajani ichma-ichlikka qarab o'zi hisoblaydi.

Ko'p kitob va maqolalar buni tavsiya qilgan. Lekin:

• Hech bir brauzer va ekran o'quvchi bu algoritmni amalda qo'llamadi.
• 2022-yilda u HTML standartidan butunlay olib tashlandi.

Natija: har bir bo'limda h1 yozilgan sahifani ekran o'quvchi "o'nta asosiy sarlavhali" sahifa sifatida o'qiydi. Nu HTML Checker ogohlantiradi:

Warning: Consider using the “h1” element as a top-level heading only — or else use the “headingoffset” attribute (otherwise, all “h1” elements are treated as top-level headings by many screen readers and other tools).

Tarjimasi: "Eng yuqori darajadagi sarlavha uchungina h1 ishlatishni o'ylab ko'ring. Aks holda ko'p ekran o'quvchilar va boshqa vositalar hamma h1 larni eng yuqori darajali deb hisoblaydi." Xabarda tilga olingan headingoffset — standartga yaqinda taklif qilingan yangi atribut, u hali hamma brauzerda ishlamaydi.

Amaliy qoida oddiy va o'zgarmagan: sarlavha darajasini tuzilmaga qarab o'zingiz qo'ying — h1 sahifa mavzusi, section lar ichida h2, ularning ichida h3. section va article darajani o'zgartirmaydi.

7. Ko'p uchraydigan xatolar

7.1 Sarlavhasiz section

section — CSS "o'rami" sifatida: <section class="konteyner">. Tuzatish: sarlavha bo'lmasa — div.

7.2 Hamma narsa article

Sahifaning har bir bloki article: menyu, bo'limlar, hatto tugmalar qobig'i. Tuzatish: 1-savolni halol bering: "alohida tarqatilsa tushunarlimi?". Ko'pincha javob "yo'q".

7.3 Har bir bo'limda h1

Outline algoritmiga ishonib yozilgan kod. Tuzatish: sahifada bitta h1, bo'limlarda h2, ichkarida h3.

7.4 section bilan div ni "yaxshilash"

"div yomon, semantik teg yaxshi" deb har bir div ni section ga almashtirish. Ma'nosiz section — ma'nosiz div dan yaxshi emas, balki ekran o'quvchi uchun chalkashroq. Tuzatish: Semantik HTML darsidagi qoida: ma'nosi bor joyda ma'noli teg, ma'nosi yo'q joyda div.

8. Mashqlar

1-mashq (oson): Tanlang

1. Onlayn do'kondagi mahsulot kartochkasi →
2. Landing sahifadagi "Nega biz?" bo'limi (sarlavhasi bilan) →
3. Ikki ustunni yonma-yon qo'yuvchi qobiq →

2-mashq (o'rta): Tuzatish

<main>
  <section class="qobiq">
    <h1>Yangiliklar</h1>
    <section>
      <h1>Yangi filial ochildi</h1>
      <p>Yunusobodda ikkinchi choyxonamiz ochildi.</p>
    </section>
    <section>
      <h1>Osh bayrami</h1>
      <p>5-oktabr kuni bepul osh.</p>
    </section>
  </section>
</main>

<main>
  <h1>Yangiliklar</h1>
  <article>
    <h2>Yangi filial ochildi</h2>
    <p>Yunusobodda ikkinchi choyxonamiz ochildi.</p>
  </article>
  <article>
    <h2>Osh bayrami</h2>
    <p>5-oktabr kuni bepul osh.</p>
  </article>
</main>

3-mashq (qiyin): Bosh sahifani qayta tuzing

1. Choyxona bosh sahifasining main qismini algoritm bo'yicha tuzing: hgroup (nom va shior), kamida uchta section (har birida h2), sharhlar bo'limida kamida ikkita article.
2. Bitta bo'limda faqat bezak uchun guruh kerak bo'lsin — div bilan.
3. Nu HTML Checker'da "Section lacks heading", "Article lacks heading" va h1 bo'yicha ogohlantirishlar qolmasin.

<main>
  <hgroup>
    <h1>Choyxona «Bahor»</h1>
    <p>1998-yildan beri Chilonzorda</p>
  </hgroup>

  <section>
    <h2>Bugungi menyu</h2>
    <div class="kartochkalar">
      <p>Osh — 35 000 so'm</p>
      <p>Lag'mon — 28 000 so'm</p>
    </div>
  </section>

  <section>
    <h2>Tadbirlar</h2>
    <p>5-oktabr — <a href="tadbirlar/">osh bayrami</a>.</p>
  </section>

  <section>
    <h2>Mijozlar sharhlari</h2>
    <article>
      <h3>Malika</h3>
      <p>Eng mazali osh!</p>
    </article>
    <article>
      <h3>Jasur</h3>
      <p>Choyi ham, xizmati ham a'lo.</p>
    </article>
  </section>
</main>

9. Real ishda

• Bloglar va yangilik saytlari — har bir maqola va izoh article. Qidiruv tizimlari va o'qish rejimi asosiy maqolani aynan shu teg orqali topadi.
• RSS va agregatorlar. article ning "alohida tarqatish" g'oyasi shu yerdan keladi: yangilik saytidan maqolalar boshqa ilovalarga uzatiladi.
• Onlayn do'konlar — mahsulot kartochkalari ko'pincha article: har biri mustaqil, o'z nomi, rasmi va narxi bilan.
• Kod review'da "bu section emas, div" izohi — tez-tez uchraydi. Tanlash algoritmini bilgan dasturchi uni bir necha soniyada hal qiladi.

Xulosa

• article — mustaqil kontent: "alohida post qilsam tushunarlimi?" — ha bo'lsa, article.
• section — kattaroq butunning sarlavhali mavzuviy qismi; sarlavhasiz section — ehtimol div.
• div — faqat CSS/JS uchun guruh; undan oldin aniqroq teg bor-yo'qligini tekshiring.
• Ichma-ich article — maqola ichidagi izohlar kabi bog'liq mustaqil kontent.
• hgroup — sarlavha va uning shiori (h1 + p).
• Outline algoritmi ishlamaydi va standartdan olib tashlangan: sarlavha darajasini o'zingiz qo'ying.

Keyingi dars: Kontent modeli: nima ichiga nima joylashadi — elementlar turkumlari va noto'g'ri ichma-ichlik DOM'ni qanday o'zgartirishi.

Manbalar

• MDN: <article>, <section>, <hgroup> — developer.mozilla.org
• WHATWG HTML: "Sections" va "Headings and outlines" — html.spec.whatwg.org
• Adrian Roselli: "There Is No Document Outline Algorithm" — adrianroselli.com