HTML kontent modeli: qaysi element ichiga nima joylashadi

Qisqacha: Har bir HTML element faqat ma'lum turdagi bolalarni qabul qiladi — bu uning kontent modeli. Masalan, p ichida faqat matn darajasidagi elementlar (phrasing content) bo'ladi, ul ichida — faqat li, havola ichida esa boshqa havola yoki tugma bo'lmaydi. Qoida buzilsa, brauzer DOM'ni o'zicha "tuzatadi" — sahifa siz yozgandan boshqacha bo'lib qoladi. React kabi freymvorklarda bu jiddiy xatolarga olib keladi.

Bu darsda

• Kontent modeli va element turkumlari nima ekanini tushunasiz.
• Flow, phrasing, interactive va sectioning turkumlarini ajratasiz.
• MDN'da elementning "Permitted content" bo'limini o'qiy olasiz.
• "Transparent" kontent modelini tushunasiz.
• Noto'g'ri ichma-ichlik DOM'ni qanday o'zgartirishini va React'da nimaga olib kelishini bilasiz.

Oldin bilishingiz kerak: article, section yoki div, Tugma yoki havola.

1. Nega bu kerak?

Bu qismda bir necha marta bir xil hodisani ko'rdik:

• p ichiga h2 qo'ydik — paragraf bo'linib, bo'sh p paydo bo'ldi (Sarlavhalar).
• a ichiga a qo'ydik — ikkita alohida havola bo'lib qoldi (Tugma yoki havola).
• ul ichiga p qo'ydik — validator xato berdi (Ro'yxatlar).

Har safar alohida qoida sifatida o'rgandik. Aslida ularning hammasi bitta tizimdan kelib chiqadi — kontent modeli. Bu darsda o'sha tizimni ko'ramiz. Shundan keyin istalgan element uchun "buni bu yerga qo'ysa bo'ladimi?" degan savolga o'zingiz javob topasiz.

2. Kontent modeli nima?

Har bir HTML elementning standartdagi ta'rifida ikki narsa yozilgan:

1. Turkumlari (categories) — element qaysi "oila"larga kiradi.
2. Kontent modeli (content model) — uning ichiga qaysi turkumdagi elementlar qo'yilishi mumkin.

Xuddi uy qurilishidagi qoidalar kabi: xonada mebel bo'ladi, mebel ichida — idishlar. Lekin idish ichida xona bo'lmaydi. Har bir "idish"ning nima sig'dirishi aniq.

Masalan, p:

• Turkumi: flow content, palpable content.
• Kontent modeli: phrasing content — faqat matn darajasidagi narsalar.

ul:

• Turkumi: flow content.
• Kontent modeli: nol yoki bir nechta li (va skript bilan ishlaydigan ikki xizmat elementi).

3. Asosiy turkumlar

HTML standartida bir necha turkum bor. Kundalik ishda eng keraklilari:

Turkumlar kesishadi. a — bir vaqtda flow, phrasing va interactive. img — flow, phrasing va embedded (joylangan).

3.1 "Block" va "inline" — eski atamalar

div va span darsida "block" va "inline" elementlarni ko'rgan edik. Bu atamalar HTML 4 dan qolgan. Bugun ular ikki xil narsani chalkashtirib yuboradi:

• Ko'rinish — element yangi qatordan boshlanadimi. Buni CSS'dagi display belgilaydi va CSS bilan istalgancha o'zgaradi.
• Ichma-ichlik qoidasi — element ichiga nima qo'yish mumkin. Buni kontent modeli belgilaydi va CSS unga ta'sir qilmaydi.

Taxminan: eski "inline" ≈ phrasing content, eski "block" ≈ phrasing bo'lmagan flow content. Lekin yangi atamalar aniqroq. Masalan, CSS bilan span ni block ko'rinishida qilsangiz ham, uning ichiga div qo'yib bo'lmaydi — kontent modeli o'zgarmaydi.

Tekshirib ko'ring: CSS'da display: block berilgan span ichiga div qo'yish mumkinmi?

4. Eng muhim qoidalar

Qo'lda tekshirish uchun eng ko'p kerak bo'ladigan qoidalar:

Oddiy eslab qolish usuli:

1. Paragraf va sarlavha — faqat matn uchun. Ularning ichida bloklar bo'lmaydi.
2. Ro'yxat — faqat bandlar uchun.
3. Bosiladigan ichida bosiladigan yo'q.

Bo'sh joyni to'ldiring: ul ning bevosita bolasi bo'la oladigan yagona element (skript elementlaridan tashqari) —

5. Transparent — "shaffof" kontent modeli

Ba'zi elementlarning kontent modeli — transparent ("shaffof"). Bu degani: "mening ichimga — otam qabul qiladigan narsa qo'yiladi".

Eng muhim misol — a. Havola asoslari darsida butun kartochkani havolaga o'ragan edik:

<div>
  <a href="taomlar/osh.html">
    <h3>Toshkent oshi</h3>
    <p>35 000 so'm</p>
  </a>
</div>

To'g'ri: a ning otasi div — u h3 va p ni qabul qiladi, demak a ham qabul qiladi.

Endi xuddi shu havolani paragraf ichiga qo'yamiz:

<p>
  <a href="taomlar/osh.html">
    <h3>Toshkent oshi</h3>
  </a>
</p>

Xato: a ning otasi — p, u faqat phrasing content qabul qiladi. h3 esa phrasing emas. a "shaffof" — u otasining qoidasini meros qilib oladi.

Boshqa shaffof elementlar: ins, del, map, shuningdek video va audio ning zaxira kontenti.

6. Qoida buzilsa nima bo'ladi

6.1 Brauzer DOM'ni "tuzatadi"

Brauzer xato bermaydi — u sahifani HTML standartidagi aniq qoidalar bo'yicha qayta quradi. Oldingi darslardagi misollar:

Hamma brauzer aynan bir xil "tuzatadi" — bu qoidalar standartda yozilgan. Lekin natija siz rejalashtirgandan boshqacha. CSS kutilgandek ishlamaydi, bo'sh elementlar paydo bo'ladi. Bu "tuzatish" mexanizmini keyingi darsda ichidan ko'ramiz.

6.2 React va "hydration" xatosi

Zamonaviy freymvorklarda muammo yanada jiddiy. React yoki Next.js (kursda o'rganamiz) sahifani avval serverda HTML qilib yasaydi. Keyin brauzerda JavaScript o'sha HTML ustiga "jon kiritadi" — bu jarayon hydration ("sug'orish") deyiladi.

Agar HTML'da noto'g'ri ichma-ichlik bo'lsa:

1. Server a ichida a bo'lgan HTML yuboradi.
2. Brauzer uni o'zicha "tuzatib", ikkita alohida a qiladi.
3. React esa bitta ichma-ich tuzilmani kutadi. Kutgani va DOM'dagi narsa mos kelmaydi.
4. Natija — konsolda hydration xatosi, sahifaning bir qismi qayta chiziladi yoki ishlamay qoladi.

Bu nazariya emas. Hatto IlmHamroh saytining o'zida ham shunday xato bo'lgan: kirish sahifasida logotip havolasi ichida yana bitta havola bor edi. Xato React'ning hydration xatosi sifatida ko'rindi. Tuzatish — bitta ortiqcha a ni olib tashlash edi.

Xulosa: kontent modeli qoidalari — "validator uchun" emas. Ular real xatolarning oldini oladi.

7. MDN'da kontent modelini o'qish

Har bir element uchun qoidani yodlash shart emas. MDN'dagi element sahifasida (masalan, <p>) pastda Technical summary jadvali bor. Unda:

• Content categories — element qaysi turkumlarga kiradi.
• Permitted content — ichida nima bo'lishi mumkin.
• Permitted parents — u nimaning ichida bo'lishi mumkin.

Hujjat o'qish darsida MDN sahifasining tuzilishi bilan tanishgansiz. Shubha tug'ilganda — shu jadvalga qarang. Yoki kodni validatordan o'tkazing: kontent modeli xatolari aynan validator eng yaxshi topadigan xatolar.

8. Ko'p uchraydigan xatolar

Hammasi uchun eng yaxshi vosita — validator va linter. Ularning haqiqiy xabarlari:

8.1 p ichida blok

Error: No “p” element in scope but a “p” end tag seen.

Tarjimasi: "Ochiq p yo'q, lekin p ning yopuvchi tegi uchradi." p ichidagi blok element paragrafni erta yopdi, oxiridagi </p> esa "yetim" qoldi. Tuzatish: blokni paragrafdan chiqaring yoki gap ichida span ishlating.

8.2 Ro'yxat ichida li dan boshqa narsa

Error: Element “p” not allowed as child of element “ul” in this context.

Tuzatish: li ga o'rang yoki ro'yxatdan chiqaring.

8.3 Interaktiv ichida interaktiv

Error: The element “button” must not appear as a descendant of the “a” element.

Tuzatish: elementlarni yonma-yon qo'ying (Tugma yoki havola darsidagi kartochka yechimi).

8.4 Inline ichida blok

Error: Element “div” not allowed as child of element “span” in this context.

Tuzatish: tashqi elementni div ga almashtiring yoki ichkisini span ga.

9. Mashqlar

1-mashq (oson): Mumkinmi?

1. strong ichida a →
2. h2 ichida p →
3. button ichida span →

2-mashq (o'rta): DOM'ni oldindan ayting

Brauzer bu kodni qanday DOM'ga aylantiradi? Avval yozing, keyin Elements panelida tekshiring.

<p>Menyu:
  <ul>
    <li>Osh</li>
  </ul>
</p>

<p>Menyu:
  </p><ul>
    <li>Osh</li>
  </ul>
<p></p>

3-mashq (qiyin): Yashirin xatolarni toping

Sahifangizning hamma fayllarini npx html-validate va Nu HTML Checker orqali tekshiring. Kontent modeli bilan bog'liq har bir xato uchun:

1. Qaysi qoida buzilganini ayting (4-bo'limdagi jadval bo'yicha).
2. Tuzating.
3. Elements panelida tuzatishdan oldingi va keyingi DOM'ni solishtiring.

10. Real ishda

• React va Next.js loyihalari — hydration xatolarining eng ko'p uchraydigan sababi noto'g'ri ichma-ichlik (p ichida div, a ichida a). React ogohlantirishida ko'pincha "cannot be a descendant of" ("... ning avlodi bo'la olmaydi") iborasi bo'ladi.
• Kontent tizimlari. Muharrir foydalanuvchi matnini p ichiga o'raydi — foydalanuvchi esa jadval yoki ro'yxat qo'shadi. Natija — buzilgan DOM. Tajribali dasturchi buni birinchi tekshiradi.
• Kod review'da kontent modeli xatolari validator va linterlar orqali avtomatik tutiladi.
• Intervyu savoli: "Nega p ichiga div qo'yib bo'lmaydi?" — javobingiz: "p ning kontent modeli — phrasing content; brauzer paragrafni yopadi va DOM o'zgaradi".

Xulosa

• Kontent modeli — element ichiga qaysi turkumdagi elementlar qo'yilishi mumkinligi.
• Asosiy turkumlar: flow, phrasing, heading, sectioning, interactive, metadata.
• "Block/inline" — eski atamalar: ko'rinish — CSS ishi, ichma-ichlik — kontent modeli ishi.
• p va sarlavhalar — faqat phrasing; ul/ol — faqat li; interaktiv ichida interaktiv yo'q.
• Transparent (a, ins, del) — otasining qoidasini oladi.
• Qoida buzilsa, brauzer DOM'ni o'zgartiradi; React'da bu hydration xatosiga olib keladi.

Keyingi dars: Brauzer HTML'ni qanday tahlil qiladi — tokenizer, daraxt qurish va brauzer xatolarni qanday "tuzatishi".

Manbalar

• WHATWG HTML: "Content models" va "Kinds of content" — html.spec.whatwg.org
• MDN: "Content categories" — developer.mozilla.org
• React hujjatlari: "Hydration" xatolari (react.dev)