HTML sarlavhalar va paragraflar: h1–h6 ierarxiyasi va p

Qisqacha: Sarlavhalar (h1–h6) — sahifaning mundarijasi: h1 asosiy mavzu, h2 bo'limlar, h3 ularning ichidagi bandlar. Darajalar kitobdagi bob va bo'limlar kabi ketma-ket keladi, sakrab o'tilmaydi. Oddiy matn p (paragraf) ichida yoziladi. Sarlavha darajasi ma'noga qarab tanlanadi, shrift o'lchamiga qarab emas.

Bu darsda

• Olti darajali sarlavhalarni to'g'ri ierarxiyada yozasiz.
• Nega sarlavha darajasini sakrab o'tmaslik kerakligini tushuntira olasiz.
• Sahifada nechta h1 bo'lishi kerakligini bilasiz.
• Matnni p paragraflariga to'g'ri bo'lasiz.
• Sarlavhani "katta matn" uchun ishlatish xatosini taniysiz va tuzatasiz.

Oldin bilishingiz kerak: Hujjat skeleti, HTML'ni formatlash va validatsiya qilish.

1. Nega bu kerak?

Gazeta yoki darslikni qo'lingizga oling. Siz uni boshidan oxirigacha so'zma-so'z o'qimaysiz. Avval sarlavhalarga ko'z yugurtirasiz: qaysi bo'lim qiziq? Keyin o'shani o'qiysiz.

Internetda ham odamlar xuddi shunday qiladi. Sahifaga kirgan odam birinchi soniyalarda sarlavhalarni "skanerlaydi". Sarlavhalar tartibli bo'lsa, u kerakli joyni darhol topadi.

Sarlavhalarni yana ikki "o'quvchi" o'qiydi. HTML nima darsida ular bilan tanishgan edik:

• Ekran o'quvchi. Ko'zi ojiz foydalanuvchilarning ko'pchiligi uzun sahifada birinchi navbatda sarlavhalar bo'ylab harakatlanadi. Masalan, NVDA dasturida H tugmasi keyingi sarlavhaga, 2 tugmasi keyingi h2 ga sakratadi.
• Google. U sarlavhalardan sahifa nima haqida ekanini va qanday bo'limlardan iboratini tushunadi.

Demak, sarlavhalar — faqat bezak emas. Ular sahifaning mundarijasi.

2. Olti daraja: h1 dan h6 gacha

HTML'da sarlavhaning olti darajasi bor. h — inglizcha "heading" (sarlavha) so'zidan, raqam esa darajasi:

<h1>1-daraja: sahifaning asosiy mavzusi</h1>
<h2>2-daraja: katta bo'lim</h2>
<h3>3-daraja: bo'lim ichidagi qism</h3>
<h4>4-daraja</h4>
<h5>5-daraja</h5>
<h6>6-daraja</h6>

Brauzer ularni turli o'lchamda va qalin qilib ko'rsatadi: h1 eng katta, h6 eng kichik. Lekin bu faqat brauzerning standart uslubi. O'lchamni CSS bilan xohlagancha o'zgartirish mumkin — h1 ni kichik, h3 ni ulkan qilish ham. Darajaning ma'nosi esa o'zgarmaydi.

Amalda eng ko'p h1, h2 va h3 ishlatiladi. h5 va h6 juda kam uchraydi — bunchalik chuqur tuzilma kamdan-kam kerak.

Maslahat: Markdown darsida # belgisini ko'rgansiz. U aynan shu sarlavhalarning qisqa yozuvi: # — h1, ## — h2, ### — h3. Markdown fayllar saytga chiqqanda shu teglarga aylanadi. Hozir o'qiyotgan dars ham shunday yozilgan.

3. Ierarxiya: sahifa — bu kitob

3.1 Kitob mundarijasi kabi

Darslik mundarijasini eslang:

Choyxona «Bahor»                 ← kitob nomi
  Menyu                          ← bob
    Issiq taomlar                ← bo'lim
    Ichimliklar                  ← bo'lim
  Biz haqimizda                  ← bob
    Tarix                        ← bo'lim

HTML'da bu mundarija shunday yoziladi:

<h1>Choyxona «Bahor»</h1>

<h2>Menyu</h2>
<h3>Issiq taomlar</h3>
<p>Osh — 35 000 so'm. Kabob — 25 000 so'm.</p>
<h3>Ichimliklar</h3>
<p>Ko'k choy — 5 000 so'm.</p>

<h2>Biz haqimizda</h2>
<h3>Tarix</h3>
<p>Choyxonamiz 1998-yildan beri ishlaydi.</p>

E'tibor bering: HTML'da sarlavhalar bir-birining ichiga qo'yilmaydi. Ular ketma-ket turadi. Ierarxiyani faqat raqam bildiradi: h3 — o'zidan oldingi eng yaqin h2 ning bo'limi.

3.2 Qoida: darajani sakrab o'tmang

Ichkariga kirganda bir pog'onadan tushiladi: h1 → h2 → h3. h2 dan to'g'ridan-to'g'ri h4 ga o'tish mumkin emas.

Noto'g'ri — h1 dan keyin birdan h3:

<h1>Choyxona «Bahor»</h1>
<h3>Menyu</h3>

To'g'ri:

<h1>Choyxona «Bahor»</h1>
<h2>Menyu</h2>

Nega bu muhim? Ekran o'quvchi foydalanuvchisi "sarlavha, 3-daraja: Menyu" ni eshitadi. U 2-darajali bo'limni o'tkazib yubordimmi, deb o'ylaydi va qidira boshlaydi. Kitobda "1-bob" dan keyin to'g'ridan-to'g'ri "1.1.1-band" kelsa, siz ham shunday chalkashardingiz.

3.3 Yuqoriga qaytish — mumkin

Pastga bir pog'onadan tushiladi, lekin yuqoriga istalgancha sakrash mumkin. Yangi bob boshlanganda h4 dan keyin to'g'ridan-to'g'ri h2 kelishi — normal:

<h2>Menyu</h2>
<h3>Issiq taomlar</h3>
<h4>Osh turlari</h4>
<h2>Biz haqimizda</h2>

Kitobda ham shunday: "2.3.1-band" dan keyin "3-bob" kelishi mumkin.

Tekshirib ko'ring: Qaysi ketma-ketlikda xato bor?

1. h1, h2, h3, h2, h3
2. h1, h2, h4, h2
3. h1, h2, h3, h3, h2

4. Bitta h1 — sahifaning asosiy mavzusi

h1 — sahifa nima haqida ekanini aytadi. Kitobning nomi bitta bo'lgani kabi, sahifada bitta h1 bo'lishi tavsiya etiladi.

Aniq bo'laylik: bu qat'iy qoida emas, tavsiya. HTML standarti bir nechta h1 ga ruxsat beradi, validator ham xato demaydi. Lekin deyarli barcha accessibility va SEO bo'yicha qo'llanmalar bitta h1 ni maslahat beradi. Sabab oddiy: foydalanuvchi va Google "asosiy mavzu"ni ikkilanmasdan topsin.

h1 ko'pincha sahifaning title iga o'xshash bo'ladi, lekin aynan bir xil bo'lishi shart emas:

title da sayt nomi bor, chunki u yorliqlar orasida ajralib turishi kerak. h1 esa sahifa ichida — foydalanuvchi qaysi saytda ekanini allaqachon biladi.

Maslahat: Eski maqolalarda "har bir bo'lim ichida o'z h1 ingizni ishlating" degan maslahatni uchratishingiz mumkin. Bu "outline algoritmi" degan g'oyadan qolgan. Brauzerlar uni hech qachon qo'llamadi va 2022-yilda u standartdan olib tashlandi. Bugungi qoida oddiy: darajani raqamning o'zi belgilaydi.

5. Paragraf: p

5.1 Matnning asosiy g'ishti

Paragraf (paragraph) — bitta fikrga bag'ishlangan gaplar guruhi. HTML'da u p tegi bilan belgilanadi:

<p>Choyxonamiz 1998-yilda ochilgan. O'shandan beri osh
bir xil retsept bo'yicha tayyorlanadi.</p>
<p>Har juma kuni tushlikda palov bepul beriladi.</p>

Brauzerda:

Choyxonamiz 1998-yilda ochilgan. O'shandan beri osh bir xil retsept
bo'yicha tayyorlanadi.

Har juma kuni tushlikda palov bepul beriladi.

Ikki narsaga e'tibor bering:

1. Brauzer paragraflar orasiga o'zi bo'sh joy qo'ydi.
2. Koddagi qator uzilishi (birinchi paragrafdagi "osh" dan keyin) ekranda ko'rinmadi. Brauzer matnni oyna kengligiga qarab o'zi uzadi.

Ikkinchi xususiyatning sababini — bo'sh joy va qator uzilishlari qanday "yig'ilishini" — keyingi darsda batafsil ko'ramiz.

5.2 p ichiga nima qo'yiladi

p ichida faqat matn darajasidagi narsalar bo'ladi: oddiy matn, strong, havola a, rasm img. Sarlavha, boshqa paragraf yoki ro'yxat esa p ichiga qo'yilmaydi.

Qo'ysangiz nima bo'ladi? Qarang:

<p>Bizning taomlar: <h2>Menyu</h2></p>

Brauzer h2 ni ko'rishi bilan paragrafni o'sha joyda yopadi. Keyin </p> ni ortiqcha deb hisoblab, uning o'rniga bo'sh paragraf yaratadi. Elements panelida:

<p>Bizning taomlar: </p>
<h2>Menyu</h2>
<p></p>

Qaysi element ichiga nima joylashishi mumkinligini Kontent modeli darsida to'liq o'rganamiz.

Tekshirib ko'ring: Nega quyidagi kodda paragraf ichidagi qator uzilishi ekranda ko'rinmaydi?

html

<p>Osh — 35 000 so'm
Kabob — 25 000 so'm</p>

6. Sarlavha ≠ katta matn

Bu — boshlovchilarning eng ko'p qiladigan xatosi. Ko'rinishga qarab teg tanlash.

6.1 Xato 1: katta bo'lsin deb h1

<h1>Chegirma 20%!</h1>
<h1>Choyxona «Bahor»</h1>

"Chegirma" e'loni ko'zga tashlansin deb h1 qilingan. Endi sahifada ikkita h1 bor va Google qaysi biri asosiy mavzu ekanini bilmaydi. Ekran o'quvchi esa "sarlavha, 1-daraja: Chegirma 20%" ni sahifaning nomi deb e'lon qiladi.

To'g'risi: e'lon — oddiy paragraf. Uni katta va rangli qilish — CSS'ning ishi (CSS nima darsida boshlaymiz):

<h1>Choyxona «Bahor»</h1>
<p>Chegirma 20%!</p>

6.2 Xato 2: kichik bo'lsin deb h5

Bo'lim nomi juda katta ko'rindi, shuning uchun h2 o'rniga h5 yozildi. Natijada ierarxiya buzildi: h1 dan keyin birdan h5. To'g'risi: ma'noga qarab h2 qo'ying, o'lchamni CSS bilan kichraytiring.

6.3 Xato 3: sarlavha o'rniga "katta paragraf"

Aksincha holat: bo'lim nomini oddiy p ga yozib, keyinroq CSS bilan kattalashtirish. Ekranda sarlavhaga o'xshaydi, lekin ekran o'quvchi va Google uchun bu oddiy matn. Sarlavhalar ro'yxatida bu bo'lim ko'rinmaydi.

Qoidani eslang: avval "bu nima?" deb so'rang, keyin teg tanlang. Ko'rinish — keyingi, alohida qadam.

Tekshirib ko'ring: Sahifada "Yetkazib berish bepul!" degan e'lon bor. U eng katta harflarda bo'lishi kerak. Qaysi tegni tanlaysiz?

7. Sarlavhalarni tekshirish

7.1 W3C Nu HTML Checker

Validatsiya darsida ko'rgan Nu Checker darajalar sakrashini xato deb ko'rsatadi:

Error: The heading “h3” (with computed level 3) follows the heading “h1” (with computed level 1), skipping 1 heading level.

Tarjimasi: "3-darajali h3 sarlavhasi 1-darajali h1 dan keyin keldi — bitta daraja o'tkazib yuborildi." Nu Checker'da "outline" belgisini yoqsangiz, sahifangizning sarlavhalar daraxtini ham ko'rsatadi — mundarija qanday chiqqanini bir qarashda ko'rasiz.

Bo'sh sarlavha uchun ogohlantirish beradi:

Warning: Empty heading.

7.2 html-validate

html-validate'da sarlavha qoidasini .htmlvalidate.json orqali yoqamiz (validatsiya darsidagi kabi):

{
  "extends": ["html-validate:recommended"],
  "rules": {
    "heading-level": "error"
  }
}

Endi npx html-validate index.html shunday xatolarni topadi:

  9:4   error  Heading level can only increase by one, expected <h2> but got <h3>  heading-level
 10:4   error  <h2> cannot be empty, must have text content                        empty-heading
 11:4   error  Multiple <h1> are not allowed                                       heading-level

1. "Sarlavha darajasi faqat bittaga oshishi mumkin: h2 kutilgan edi, h3 keldi."
2. "h2 bo'sh bo'lishi mumkin emas, unda matn bo'lishi kerak."
3. "Bir nechta h1 ga ruxsat yo'q." — bu html-validate'ning qat'iyroq tanlovi. Standart ruxsat beradi, lekin vosita tavsiyani qoidaga aylantirgan.

8. Ko'p uchraydigan xatolar

8.1 Bo'sh joy uchun bo'sh paragraflar

<p>Osh tayyor.</p>
<p></p>
<p></p>
<p>Kabob ham tayyor.</p>

Maqsad — paragraflar orasida katta bo'shliq. Lekin bo'sh p — ma'nosiz element. Ekran o'quvchi ba'zan ularni "bo'sh" deb o'qiydi. Tuzatish: bo'sh p larni o'chiring. Oraliqni CSS'da margin bilan beramiz.

8.2 Hamma matn bitta p da

Butun maqola bitta ulkan <p> ichida. Ekranda hammasi bitta "devor"ga aylanadi — telefonda uni o'qib bo'lmaydi. Tuzatish: har bir yangi fikr — yangi p. Bizning kursdagi qoida ham shunday: paragrafda 4 gapdan oshmasin.

8.3 Sarlavhani yopmaslik

<h2>Menyu
<p>Osh — 35 000 so'm</p>

Yopilmagan h2 keyingi paragrafni ham o'z ichiga oladi: butun matn katta va qalin bo'lib chiqadi. Tuzatish: </h2> ni qo'shing. Formatlovchi bu yerda yordam beradi — chekinishlar g'alati ko'rinsa, ehtimol biror teg yopilmagan.

9. Mashqlar

1-mashq (oson): Osh retsepti mundarijasi

Sarlavhalarni to'g'ri darajalar bilan yozing: "Toshkent oshi retsepti" (sahifa mavzusi), uning ichida "Masalliqlar" va "Tayyorlash" bo'limlari. "Tayyorlash" ichida "Zirvak" va "Guruch solish" bandlari.

<h1>Toshkent oshi retsepti</h1>
<h2>Masalliqlar</h2>
<h2>Tayyorlash</h2>
<h3>Zirvak</h3>
<h3>Guruch solish</h3>

2-mashq (o'rta): Ierarxiyani tuzating

Bu sahifada to'rtta muammo bor. Toping va tuzating:

<h1>Chegirma!</h1>
<h1>Choyxona «Bahor»</h1>
<h4>Menyu</h4>
<p>Osh — 35 000 so'm</p>
<h2></h2>
<p>Bizning tarix <h3>1998-yil</h3></p>

<h1>Choyxona «Bahor»</h1>
<p>Chegirma!</p>
<h2>Menyu</h2>
<p>Osh — 35 000 so'm</p>
<h2>Bizning tarix</h2>
<p>Choyxona 1998-yilda ochilgan.</p>

3-mashq (qiyin): Menyu sahifasini tartibga keltiring

choyxona/menyu.html ni qayta yozing:

1. Bitta h1: "Bugungi menyu".
2. Uchta h2 bo'lim: "Issiq taomlar", "Salatlar", "Ichimliklar".
3. "Issiq taomlar" ichida ikkita h3: "Milliy taomlar" va "Kaboblar". Har bir h3 ostida kamida bitta p.
4. Faylni heading-level qoidasi yoqilgan npx html-validate bilan tekshiring — xato 0 bo'lsin.

<!DOCTYPE html>
<html lang="uz">
  <head>
    <meta charset="utf-8">
    <title>Menyu va narxlar — Choyxona «Bahor»</title>
  </head>
  <body>
    <h1>Bugungi menyu</h1>

    <h2>Issiq taomlar</h2>
    <h3>Milliy taomlar</h3>
    <p>Osh — 35 000 so'm. Lag'mon — 28 000 so'm.</p>
    <h3>Kaboblar</h3>
    <p>Qiyma kabob — 25 000 so'm.</p>

    <h2>Salatlar</h2>
    <p>Achchiq-chuchuk — 12 000 so'm.</p>

    <h2>Ichimliklar</h2>
    <p>Ko'k choy — 5 000 so'm.</p>
  </body>
</html>

10. Real ishda

• SEO. Kontent menejerlar va SEO mutaxassislari birinchi so'raydigan narsa: "sahifada h1 bormi va u to'g'rimi?". Google h1 va h2 matnlariga katta ahamiyat beradi.
• Accessibility auditi. Lighthouse (Chrome'ga o'rnatilgan audit vositasi) sarlavhalar tartibini tekshiradi va buzilganda "Heading elements are not in a sequentially-descending order" deb yozadi. U haqda HTML sahifani audit qilish darsida gaplashamiz.
• Dizayndan kodga. Dizayner maketida matnlar faqat o'lcham bilan farq qiladi. Dasturchining ishi — har biriga ma'noga qarab to'g'ri teg tanlash. Tajribali frontend dasturchi buni avtomatik qiladi.
• Kontent tizimlari. WordPress yoki Telegraph kabi muharrirlarda "Sarlavha 2", "Sarlavha 3" tugmalari — aynan h2, h3.

Xulosa

• h1–h6 — sahifaning mundarijasi; raqam darajani bildiradi, sarlavhalar esa ketma-ket turadi.
• Pastga bir pog'onadan tushiladi (h2 → h3), yuqoriga istalgancha qaytish mumkin.
• Sahifada bitta h1 — asosiy mavzu; bu standart emas, lekin mustahkam tavsiya.
• Oddiy matn p ichida; har bir fikr — alohida paragraf; p ichiga sarlavha qo'yilmaydi.
• Teg ma'noga qarab tanlanadi: katta ko'rinish — CSS ishi, h1 emas.
• Nu Checker va heading-level qoidali html-validate darajalar sakrashini topadi.

Keyingi dars: Bo'sh joylar va qator uzish qoidasi — nega brauzer koddagi ortiqcha bo'sh joy va qator uzilishlarini "yig'ib" qo'yadi va kerakli joyda qatorni qanday uzish mumkin.

Manbalar

• MDN: "<h1>–<h6>: The HTML Section Heading elements", "<p>: The Paragraph element" — developer.mozilla.org
• WebAIM: "Semantic Structure: Regions, Headings, and Lists" — webaim.org
• W3C WAI: "Headings" (Page Structure Tutorial) — w3.org/WAI