Series: HTML Basics Lesson 4

HTML — Web Platformaning Asosi

HTML'ni Web Platformaning asosi sifatida o'rganing: semantika, brauzer parsing, DOM qurilishi va HTML nima uchun error bermasligi.

4-dars

HTML — Web Platformaning Asosi

Ko'pchilik HTML'ni faqat "markup language" yoki "taglar to'plami" deb o'ylaydi. Aslida esa HTML — bu brauzer bilan kelishuv, platforma API, va ma'no (semantics) uzatuvchi til.

Bu darsda biz HTML'ni:

  • dizayn vositasi emas,
  • UI framework emas,
  • "frontend boshlanishi" emas,

balki Web Platformaning eng asosiy qatlami sifatida ko'ramiz.

1. HTML nimani HAL qiladi?

HTML'ning vazifasi ko'rinish chizish emas. HTML muammoni hal qiladi:

HTML nimani hal qiladi?

Kontent strukturasi

  • Bu nima?
  • Bu nimaga tegishli?
  • Qaysi qismi muhim, qaysisi yordamchi?

Ma'no (Semantics)

  • Bu sarlavhami?
  • Bu navigatsiyami?
  • Bu maqolami?
  • Bu tugmami yoki shunchaki matnmi?

Brauzer va boshqa agentlar bilan kelishuv

  • Brauzer
  • Screen reader
  • Search engine
  • Voice assistant
  • Reader mode
  • Print mode

HTML — bu "mening sahifam nimani anglatadi" degan deklaratsiya.

  • CSS — qanday ko'rinadi
  • JS — qanday harakat qiladi
  • HTML — bu nima o'zi

2. HTML — bu dizayn emas, ma'no

❌ Noto'g'ri fikr

"HTML sahifani chizadi"

Yo'q. HTML hech narsani chizmaydi.

HTML shunchaki shuni aytadi:

<h1>Bu sarlavha</h1>
<p>Bu paragraf</p>
<button>Bu tugma</button>

Brauzer esa o'z default UI qoidalari asosida buni ko'rsatadi.

Agar brauzer dizaynini o'zgartirsak — HTML o'zgarmaydi. Agar CSS o'chsa — HTML hali ham ishlaydi.

Bu juda muhim:

HTML UI emas, HTML meaning layer

3. Browser HTML'ni qanday parse qiladi?

HTML yozilganida brauzer uni qadam-baqadam o'qiydi.

1-qadam: Tokenization

Brauzer matnni belgilar oqimi sifatida o'qiydi va tokenlarga ajratadi:

  • <div> → start tag
  • </div> → end tag
  • text → text node
  • <!-- --> → comment

HTML bu bosqichda syntax jihatdan qattiq emas.

2-qadam: Tree Construction

Tokenlardan DOM tree quriladi.

Brauzer HTML'ni yuqoridan pastga qarab o'qiydi va:

  • ochilgan taglarni stack'ga qo'yadi
  • yopilganini topganda chiqaradi

Agar xato bo'lsa-chi?

👉 Brauzer o'zi to'g'rilaydi.

4. Nega HTML Error Bermaydi? (Parser Progress Bilan)

HTML'da "Error" Degan Tushuncha Bormi?

Qisqa javob: yo'q. To'g'rirog'i: HTML'da error tashlash mexanizmi yo'q.

HTML:

  • exception tashlamaydi
  • execution'ni to'xtatmaydi
  • "syntax error" bermaydi

Buning o'rniga HTML'da bitta prinsip bor:

Parse qil → DOM qur → Render qil

Qanday bo'lishidan qat'i nazar.

HTML Parsing — Progressiv Jarayon

HTML bir martalik tekshiruv emas. U progressive parsing bilan ishlaydi.

Brauzer HTML'ni:

  • orqaga qaytmasdan
  • fayl to'liq kelishini kutmasdan
  • yuqoridan pastga qarab

o'qiydi.

Bu shuni anglatadi:

Brauzer qarorni real vaqtda qabul qiladi.

Real Misol: Xato HTML

<p>
  <div>Salom</p>

Bu HTML noto'g'ri. Endi brauzer qanday progress bilan ishlashini ko'ramiz.

1-Bosqich: Tokenization

Brauzer belgilar oqimini tokenlarga ajratadi:

  • <p> → start tag token
  • <div> → start tag token
  • Salom → text token
  • </p> → end tag token

Hali bu bosqichda:

  • error yo'q
  • mantiq tekshirilmaydi
  • faqat tokenlar bor

2-Bosqich: Tree Construction (Stack bilan)

Brauzer DOM qurishni boshlaydi.

2.1 <p> keldi

  • stack: [p]
  • DOM: <p></p>

2.2 <div> keldi

⚠️ MUHIM NUQTA

HTML qoidasi:

<p> ichida <div> bo'lishi mumkin emas

Shu sababli parser:

  • <p> ni implicit yopadi
  • stack'dan chiqaradi
  • <div> ni yangi tugun sifatida ochadi

Natija:

<p></p>
<div></div>
  • stack: [div]

2.3 Salom keldi

<div> ichiga qo'shiladi

<div>Salom</div>

2.4 </p> keldi

Parser tekshiradi:

  • stack tepasida <div> bor
  • <p> yo'q

Qoidaga ko'ra:

  • mos kelmagan end tag → e'tiborsiz qoldiriladi

Hech qanday error yo'q.

3-Bosqich: DOM Tayyor

Yakuniy DOM:

<p></p>
<div>Salom</div>

Bu:

  • valid DOM
  • render qilinadi
  • foydalanuvchi kontentni ko'radi

Nega Parser "To'xtab Qolmaydi"?

Chunki HTML parser:

  • fail-safe
  • error-tolerant
  • forward-only

Agar parser to'xtasa:

  • internetning yarmi ochilmaydi
  • eski saytlar o'ladi
  • web ishonchsiz bo'ladi

HTML Parser Qarorlari — Oldindan Belgilangan

Bu "brauzer fantaziyasi" emas.

HTML standartida:

  • qaysi tag qaysini yopishi
  • qaysi end tag tashlab yuborilishi
  • qaysi joyda auto-close bo'lishi

qat'iy yozilgan.

Shuning uchun:

  • Chrome
  • Firefox
  • Safari

bir xil natija beradi.

5. DOM nima va HTML bilan aloqasi

HTML — bu matn. DOM — bu xotiradagi obyektlar daraxti.

HTML ≠ DOM

  • HTML — static source
  • DOM — runtime representation

Misol:

<div id="app"></div>

Brauzer buni quyidagicha DOM'ga aylantiradi:

{
  type: "div",
  id: "app",
  children: []
}

JavaScript HTML bilan emas, DOM bilan ishlaydi.

Shu sababli:

  • JS HTML'ni o'zgartirmaydi
  • JS DOM'ni o'zgartiradi
  • HTML fayl o'zgarmaydi, sahifa esa o'zgaradi

6. HTML platforma API sifatida

HTML'ni shunday ko'rish kerak:

HTML — bu browser API contract

Misollar:

  • <a> → navigation API
  • <form> → network API
  • <input> → state + validation API
  • <video> → media API
  • <details> → interaction API

Ko'p funksiyalar JS'siz ham ishlaydi:

  • Enter bosish
  • Tab navigation
  • Accessibility
  • Validation
  • History

Frameworklar kelib-ketadi. HTML API esa 30 yildan beri ishlayapti.

7. HTML ≠ UI, HTML = semantics + meaning

UI — bu natija, HTML — bu ta'rif.

Bir xil HTML:

  • brauzerda ko'rinadi
  • screen reader'da o'qiladi
  • Google tomonidan indekslanadi
  • Reader mode'da qayta formatlanadi
  • Print'da boshqa ko'rinadi

Agar HTML noto'g'ri yozilgan bo'lsa:

  • SEO yomon
  • Accessibility yomon
  • Performance yomon
  • UX yomon

8. Xulosa

Bu darsdan olinadigan asosiy fikrlar:

  • HTML dizayn emas
  • HTML UI emas
  • HTML JS'ga xizmatkor emas
  • HTML — Web Platformaning poydevori

HTML'ni to'g'ri tushungan odam:

  • frameworkdan qo'rqmaydi
  • SSR / CSR farqini tushunadi
  • accessibility'ni avtomatik oladi
  • SEO'ni "plugin" bilan emas, to'g'ri struktura bilan qiladi