RUUZ

HTML nima va hujjat nimalardan tashkil topgan?

JuniorHTML #html #basics

Savol

HTML nima, oddiy HTML hujjati qanday tuzilgan va brauzer sahifa yuklanayotganda bu matn bilan nima qiladi?

Qisqa javob

HTML (HyperText Markup Language) — teglar yordamida veb-sahifaning tuzilishi va mazmunini tasvirlaydigan belgilash tili. Hujjat <!DOCTYPE html> bilan boshlanadi va ichida <head> (metama'lumotlar, ko'rinmaydi) va <body> (ko'rinadigan mazmun) joylashgan <html> ildiz elementidan iborat. Brauzer bu matnni tahlil qiladi va undan obyektlar daraxtini — DOM'ni quradi.

Batafsil javob

Hujjat tuzilishi:

  • <!DOCTYPE html> — brauzerga HTML5 bo'yicha standart (quirks bo'lmagan) rendering rejimida ishlashni bildiradi. Bu bo'lmasa, brauzer HTML'ning eski versiyalari bilan moslashuv rejimini yoqishi mumkin, bu esa CSS hisob-kitoblarini (box model va h.k.) buzadi.
  • <html lang="..."> — ildiz element. lang atributi skrinriderlar va tarjimonlar uchun muhim.
  • <head> — metama'lumotlar konteyneri: <title>, <meta>, uslublar va skriptlarga havolalar. <head> ichidagi hech narsa sahifa tanasida bevosita render qilinmaydi.
  • <body> — foydalanuvchi ko'radigan hamma narsa: matn, rasmlar, interaktiv elementlar.

Brauzer HTML'ni DOM'ga qanday aylantiradi:

  1. Baytlar → belgilar — xom baytlar kodlash (odatda <meta charset>da ko'rsatilgan UTF-8) bo'yicha satrga dekodlanadi.
  2. Tokenizatsiya — satr tokenlarga bo'linadi: ochuvchi/yopuvchi teglar, atribut nomlari, matn tugunlari.
  3. Daraxt qurish — tokenlar hujjat obyekt modeliga (DOM) yig'iladi — teglarning ichma-ichligini aks ettiruvchi tugunlar ierarxiyasi.
  4. Bosqichma-bosqich rendering — brauzer fayl oxirigacha kutmaydi: u DOM'ni asta-sekin quradi, va async/defersiz <script>ga duch kelganda tahlil qilish skript yuklanib bajarilguncha bloklanadi.

DOM — bu HTML matnining o'zi emas, balki JavaScript ishlaydigan (document.querySelector va h.k.) va CSSOM bilan birga brauzer ekranga chizish uchun render tree quradigan xotiradagi jonli tuzilma.

Misol

<!DOCTYPE html>
<html lang="uz">
  <head>
    <meta charset="UTF-8" />
    <title>Hujjat namunasi</title>
  </head>
  <body>
    <h1>Salom, dunyo</h1>
    <p>Bu minimal to'g'ri HTML hujjati.</p>
  </body>
</html>

Qo'shimcha savollar

  • Quirks mode nima va u nima uchun xavfli?
  • DOM asl HTML matnidan va CSSOM'dan nimasi bilan farq qiladi?
  • Nega <body> oxiridagi <script> ko'pincha <head>dagidan afzalroq?
Keyingi savol DOM nima?