IlmHamroh
JavaScript Full-stack/4-qism. HTML4/86-dars13 daqiqa
Mundarija (30)

HTML hujjat skeleti: DOCTYPE, html, head va body

Qisqacha: Har bir HTML sahifa bir xil skeletdan boshlanadi: <!DOCTYPE html>, keyin html ildiz elementi, uning ichida head va body. head — sahifa haqidagi ma'lumot (kodlash, sarlavha), body — ekranda ko'rinadigan hamma narsa. Bu qatorlarni tushirib qoldirsangiz, brauzer eski rejimga o'tishi yoki harflarni buzib ko'rsatishi mumkin.

Bu darsda

  • To'liq HTML skeletini yoddan yoza olasiz.
  • <!DOCTYPE html> nima uchun kerakligini va quirks mode nima ekanini tushuntira olasiz.
  • lang atributini to'g'ri qo'yasiz.
  • head va body ga nima yozilishini ajratasiz.
  • meta charset va title ning vazifasini va ularsiz nima bo'lishini bilasiz.

Oldin bilishingiz kerak: Teg, element va atribut, Matn kodlash: ASCII, Unicode va UTF-8.

1. Nega bu kerak?

Birinchi sahifa darsida qiziq narsani ko'rdik. Faylimizda faqat h1 va p bor edi. Brauzer esa Elements panelida html, head va body ni o'zi qo'shib ko'rsatdi.

"Brauzer o'zi qo'shsa, men nega yozishim kerak?" — tabiiy savol. Javob: brauzer faqat ba'zilarini qo'sha oladi. Ba'zi narsalarni esa u taxmin qiladi — va ba'zan xato taxmin qiladi. Masalan:

  • Sahifangiz qaysi tilda? Brauzer bilmaydi.
  • Fayl qaysi kodlashda saqlangan? Brauzer taxmin qiladi va «» o'rniga « chiqarib yuborishi mumkin.
  • Yorliqda (tab) qanday nom chiqsin? Brauzer fayl nomini qo'yadi: index.html.

Skelet — bu savollarga bir marta, aniq javob berish. Keling, uni qatorma-qator yig'amiz.

2. To'liq skelet

Mana «Bahor» choyxonasi sahifasining to'liq skeleti:

html
<!DOCTYPE html>
<html lang="uz">
  <head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <title>Choyxona «Bahor» — Chilonzor</title>
  </head>
  <body>
    <h1>Choyxona «Bahor»</h1>
    <p>Har kuni soat 7:00 dan 23:00 gacha ochiqmiz.</p>
  </body>
</html>

Brauzerdagi natija avvalgidek: sarlavha va paragraf. Lekin endi yorliqda "Choyxona «Bahor» — Chilonzor" yozuvi chiqadi. Harflar esa hech qachon buzilmaydi.

Har bir qator nima qilishini qisqacha jadvalda ko'ring, keyin bittama-bitta ochamiz:

Qator Nima qiladi Tushirib qoldirilsa
<!DOCTYPE html> Zamonaviy rejimni yoqadi Brauzer eski "quirks" rejimga o'tadi
<html lang="uz"> Ildiz element va sahifa tili Til noma'lum qoladi
<head> … </head> Sahifa haqidagi ma'lumot Brauzer o'zi yaratadi
<meta charset="utf-8"> Matn kodlashi — UTF-8 Harflar buzilishi mumkin
<meta name="viewport" …> Telefonda to'g'ri o'lcham Telefonda sahifa mayda ko'rinadi
<title> Yorliqdagi nom Yorliqda fayl nomi chiqadi
<body> … </body> Ko'rinadigan kontent Brauzer o'zi yaratadi

3. <!DOCTYPE html> — "men zamonaviy sahifaman"

3.1 Bu teg emas

<!DOCTYPE html> — hujjat turi e'loni (document type declaration). U teg ham, element ham emas. Uning yagona vazifasi — brauzerga "bu sahifa zamonaviy qoidalar bilan yozilgan" deb aytish.

U har doim faylning eng birinchi qatorida turadi. Katta-kichik harfi muhim emas: <!doctype html> ham bir xil ishlaydi.

3.2 Quirks mode nima?

1990-yillarda brauzerlar HTML va CSS'ni har xil, ko'p xatolar bilan ko'rsatardi. O'sha paytda yozilgan millionlab saytlar aynan shu xatolarga moslashgan edi.

Keyin standartlar paydo bo'ldi va brauzerlar tuzatildi. Lekin eski saytlar buzilib qolmasligi uchun brauzerlar ikki rejimni saqlab qoldi:

  • Standart rejim (standards mode) — zamonaviy, standart bo'yicha ishlash.
  • Quirks mode ("g'alati odatlar rejimi") — 1990-yillar brauzerlarining xatolarini ataylab takrorlash.

Brauzer qaysi rejimni tanlashini <!DOCTYPE html> hal qiladi. Bu qator bor bo'lsa — standart rejim. Yo'q bo'lsa — quirks mode.

Quirks mode'da ko'p CSS qoidalari boshqacha ishlaydi: o'lchamlar, jadvallar ichidagi shriftlar, bo'sh joylar. Siz CSS yozasiz, u esa kutilmagan natija beradi. Sababini topish esa juda qiyin, chunki kodda xato yo'qdek ko'rinadi.

3.3 O'zingiz tekshiring

Sahifangizni oching, F12 bosing va Console panelida yozing:

js
document.compatMode

Konsolda:

text
'CSS1Compat'

CSS1Compat — standart rejim. Endi faylingizdan <!DOCTYPE html> ni o'chiring, saqlang va sahifani yangilang. Xuddi shu buyruq endi boshqa javob beradi:

text
'BackCompat'

BackCompat — "orqaga moslik", ya'ni quirks mode. DOCTYPE'ni qaytarib qo'yishni unutmang!

Maslahat: Eski saytlarda uzun DOCTYPE'larni uchratasiz, masalan <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ...>. Ular HTML 4 davridan qolgan. Yangi sahifada doim qisqa <!DOCTYPE html> yozing.

Tekshirib ko'ring: Faylning birinchi qatorida Salom! so'zi, ikkinchi qatorda <!DOCTYPE html> turibdi. Sahifa qaysi rejimda ishlaydi?

Javob

Quirks mode'da. DOCTYPE eng birinchi bo'lishi kerak. Undan oldin matn kelsa, brauzer uni sahifa kontenti deb o'qiydi. Keyingi DOCTYPE'ni esa e'tiborsiz qoldiradi. DOCTYPE'dan oldin faqat izoh va bo'sh qator bo'lishi mumkin.

4. <html lang="uz"> — ildiz va til

4.1 Ildiz element

html — ildiz element (root element). Sahifadagi boshqa hamma elementlar uning ichida. Teg, element va atribut darsidagi daraxtni eslang: html — daraxtning tanasi, qolganlari uning shoxlari.

4.2 lang atributi

lang — sahifa qaysi tilda yozilganini bildiradi. Bu kichik atribut ko'p narsaga ta'sir qiladi:

  • Ekran o'quvchi matnni to'g'ri talaffuz bilan o'qiydi. lang bo'lmasa, o'zbekcha matnni inglizcha talaffuz bilan o'qib, uni tushunarsiz qilishi mumkin.
  • Brauzer tarjimoni sahifa tilini to'g'ri aniqlaydi va keraksiz "Tarjima qilinsinmi?" taklifini chiqarmaydi.
  • Qidiruv tizimlari sahifani o'zbekcha qidiruvlar uchun ko'rsatadi.

Eng ko'p kerak bo'ladigan kodlar:

Til Kod
O'zbek (lotin) uz yoki uz-Latn
O'zbek (kirill) uz-Cyrl
Rus ru
Ingliz en

Biz lotin alifbosida yozganimiz uchun uz yetarli.

Diqqat: VS Code'da skeletni avtomatik yaratsangiz (buni keyingi darsda o'rganamiz), u lang="en" yozadi. O'zbekcha sahifada uni albatta uz ga almashtiring. Aks holda brauzer sahifangizni inglizcha deb hisoblaydi.

5. head va body: "posilka yorlig'i" va "posilka ichi"

Pochta orqali posilka jo'natganingizni tasavvur qiling. Qutining ustida yorliq bor: kimga, qayerdan, og'irligi. Qutining ichida esa asl narsa — sovg'a.

  • head — yorliq. Sahifa haqida ma'lumot: kodlash, nom, tavsif, ulangan fayllar. Foydalanuvchi uni sahifaning o'zida ko'rmaydi.
  • body — quti ichi. Foydalanuvchi ko'radigan hamma narsa: sarlavhalar, matn, rasmlar, tugmalar.

html ichida faqat shu ikki element bo'ladi, aynan shu tartibda: avval head, keyin body.

head ichida nima bo'lishi mumkin, bittasini ham ko'rinadigan kontent emas:

  • meta — turli ma'lumotlar (kodlash, viewport, tavsif).
  • title — sahifa nomi.
  • link — CSS fayl yoki ikonkani ulash (CSS nima darsida).
  • script — JavaScript ulash.
  • style — CSS'ni shu yerning o'zida yozish.

Bularning hammasini head anatomiyasi darsida batafsil ko'ramiz. Bugun faqat eng muhim ikkitasi: meta charset va title.

Tekshirib ko'ring: "Bugungi menyu" paragrafini head ichiga yozdingiz. Nima bo'ladi?

Javob

Paragraf baribir ekranda ko'rinadi. Brauzer head ichida ko'rinadigan kontentni uchratgach, head ni o'sha joyda yopadi va paragrafni body ga ko'chiradi. Elements panelida p ning body ichida turganini ko'rasiz. Lekin bunga ishonmang: bu brauzerning "tuzatishi", kodingiz esa noto'g'ri. Ko'rinadigan narsa doim body da.

6. <meta charset="utf-8"> — harflar buzilmasin

6.1 Muammo

Matn kodlash darsida ko'rdik: kompyuter har bir harfni raqam sifatida saqlaydi. UTF-8 — bu raqamlarni yozish usuli. VS Code fayllarni UTF-8 da saqlaydi.

Brauzer esa fayl qaysi kodlashda ekanini bilmasligi mumkin. Agar u UTF-8 o'rniga eski kodlashni taxmin qilsa, shunday bo'ladi:

text
Faylda:    Choyxona «Bahor» — osh
Brauzerda: Choyxona «Bahor» — osh

Bunday buzilgan matn mojibake deyiladi. O'zbekcha matnda «», — va boshqa maxsus belgilar ko'p — ular birinchi bo'lib buziladi.

6.2 Yechim

head ichiga, eng birinchi qator qilib yozing:

html
<meta charset="utf-8">

Bu brauzerga aniq aytadi: "fayl UTF-8 da". utf-8 yoki UTF-8 — farqi yo'q.

Ikki qoida bor:

  1. Faqat UTF-8. Zamonaviy HTML standarti boshqa kodlashga ruxsat bermaydi.
  2. Faylning birinchi 1024 baytida. Brauzer kodlashni qidirib, faylning boshidan atigi 1024 baytni ko'radi. Shuning uchun meta charset ni head ning eng tepasiga qo'yamiz.

Tekshirib ko'ring: Nega meta charset title dan oldin turishi kerak?

Javob

Chunki title ichida ham o'zbekcha harflar va «» belgilari bor. Brauzer ularni o'qishdan oldin kodlashni bilishi kerak. Bundan tashqari, meta charset faylning birinchi 1024 bayti ichida bo'lishi shart — eng tepaga qo'ysangiz, bu shart doim bajariladi.

7. <meta name="viewport"> — telefon uchun bitta qator

html
<meta name="viewport" content="width=device-width, initial-scale=1">

Bu qator bo'lmasa, telefon sahifani "kompyuter ekrani" kengligida chizadi va mayda qilib ko'rsatadi. Foydalanuvchi matnni o'qish uchun barmoqlari bilan kattalashtirishga majbur bo'ladi.

Qatorning har bir qismini head anatomiyasi va viewport darsida ochamiz. Hozircha uni skeletning doimiy qismi deb yozib qo'ying.

8. <title> — yorliqdagi nom

title — sahifaning nomi. U sahifaning o'zida ko'rinmaydi, lekin ko'p joyda chiqadi:

  • Brauzer yorlig'ida (tab).
  • Sahifani saqlab qo'yganingizda (bookmark).
  • Brauzer tarixida.
  • Google qidiruv natijalarida — ko'k rangli bosiladigan sarlavha sifatida.
  • Havolani Telegram'da ulashganingizda.

Shuning uchun title — sahifaning eng muhim matnlaridan biri. Yaxshi title aniq va qisqa bo'ladi. Aniq qism oldinda, sayt nomi oxirida:

Zaif Yaxshi
Bosh sahifa Choyxona «Bahor» — Chilonzor, Toshkent
Document Menyu va narxlar — Choyxona «Bahor»
Sahifa 2 Bog'lanish — Choyxona «Bahor»

Document — VS Code avtomatik yaratgan skeletning standart nomi. Uni doim o'zgartiring.

title ichiga faqat oddiy matn yoziladi. Unga <strong> kabi teg qo'ysangiz, brauzer uni teg deb emas, harflar deb ko'rsatadi.

Bitta sahifada title bitta bo'ladi. Qidiruv tizimlari uchun yaxshi title yozish sirlarini Qidiruv tizimlari uchun meta teglar darsida ko'ramiz.

Bo'sh joyni to'ldiring: Google qidiruv natijalarida sahifaning qaysi elementi ko'k sarlavha bo'lib chiqadi?

9. Brauzer nimani kechiradi, nimani yo'q

Standart qiziq narsaga ruxsat beradi: html, head va body teglarini yozmasa ham bo'ladi. Brauzer ularni o'zi yaratadi — buni Elements panelida ko'rdik.

Lekin professional sahifalarda ular doim yoziladi. Chunki:

  • lang atributini qo'yish uchun html tegi kerak.
  • Kod o'quvchi odam uchun tuzilma aniq ko'rinadi.
  • Validatorlar va jamoa uslubi shuni talab qiladi.

Brauzer esa kechira olmaydigan narsalar ham bor: DOCTYPE'siz sahifa quirks mode'ga tushadi, kodlash noto'g'ri taxmin qilinsa — harflar buziladi. Bularni brauzer "tuzata" olmaydi, chunki sizning niyatingizni bilmaydi.

Maslahat: Ba'zi jamoalar head va body ni html ichida surib yozmaydi — ular bilan bir xil chiziqdan boshlaydi. VS Code avtomatik skeleti ham shunday qiladi. Ikkala uslub ham to'g'ri. Asosiysi — bitta loyihada bir xil bo'lsin. Uslub qoidalarini HTML kod uslubi darsida ko'ramiz.

10. Ko'p uchraydigan xatolar

Bu xatolarni brauzer ko'rsatmaydi. Ularni W3C validatori topadi — u haqida keyingi darslardan birida gaplashamiz. Quyida validatorning haqiqiy xabarlari.

10.1 DOCTYPE yo'q

text
Error: Start tag seen without seeing a doctype first. Expected “<!DOCTYPE html>”.

Tarjimasi: "DOCTYPE'ni ko'rmasdan turib teg uchradi. <!DOCTYPE html> kutilgan edi." Sahifa quirks mode'da ishlayapti. Tuzatish: faylning eng birinchi qatoriga <!DOCTYPE html> yozing.

10.2 lang yo'q

text
Warning: Consider adding a “lang” attribute to the “html” start tag to declare the language of this document.

Tarjimasi: "Hujjat tilini bildirish uchun html tegiga lang atributini qo'shishni o'ylab ko'ring." Bu xato emas, ogohlantirish (warning). Lekin uni e'tiborsiz qoldirmang. Tuzatish: <html lang="uz">.

10.3 Kodlash e'lon qilinmagan

text
Error: The character encoding was not declared. Proceeding using “windows-1252”.

Tarjimasi: "Belgilar kodlashi e'lon qilinmagan. windows-1252 bilan davom etilyapti." Ya'ni validator eski G'arb kodlashini taxmin qildi — aynan shu «» ni « ga aylantiradi. Tuzatish: head boshiga <meta charset="utf-8">.

10.4 meta charset juda pastda

text
Error: A “charset” attribute on a “meta” element found after the first 1024 bytes.

Tarjimasi: "meta elementidagi charset atributi birinchi 1024 baytdan keyin topildi." Masalan, head boshiga uzun izoh yozib, meta charset ni undan keyin qo'ygansiz. Tuzatish: meta charset ni head ning birinchi qatoriga ko'chiring.

10.5 title yo'q

text
Error: Element “head” is missing a required instance of child element “title”.

Tarjimasi: "head elementida majburiy title bola elementi yo'q." Ha, title — majburiy. Tuzatish: head ichiga <title>...</title> qo'shing.

11. Mashqlar

1-mashq (oson): Bo'sh joylarni to'ldiring

Skeletdagi tushib qolgan so'zlarni yozing:

html
<!DOCTYPE html>
<html lang="uz">
  <head>
    <meta charset="utf-8">
    <title>Menyu — Choyxona «Bahor»</title>
  </head>
  <body>
    <h1>Bugungi menyu</h1>
  </body>
</html>
  1. Birinchi qatordagi katta harfli so'z: .
  2. O'zbekcha sahifa uchun lang qiymati: .
  3. Kodlash qiymati: .
  4. Ko'rinadigan kontent qaysi element ichida?
Yechim
  1. DOCTYPE — u standart rejimni yoqadi.
  2. uz — sahifa tili o'zbekcha.
  3. utf-8 — matn kodlashi.
  4. body — ko'rinadigan hamma narsa shu yerda. head esa sahifa haqidagi ma'lumot uchun.

2-mashq (o'rta): Beshta xato

Bu skeletda beshta xato bor. Toping va tuzating:

html
<html lang="en">
<!DOCTYPE html>
  <head>
    <title>Document</title>
    <p>Bizning manzil: Chilonzor</p>
  </head>
  <body>
    <h1>Choyxona «Bahor»</h1>
  </body>
</html>
Yechim
html
<!DOCTYPE html>
<html lang="uz">
  <head>
    <meta charset="utf-8">
    <title>Choyxona «Bahor» — Chilonzor</title>
  </head>
  <body>
    <h1>Choyxona «Bahor»</h1>
    <p>Bizning manzil: Chilonzor</p>
  </body>
</html>
  1. DOCTYPE eng birinchi qatorda emas edi — sahifa quirks mode'ga tushardi.
  2. lang="en" — sahifa o'zbekcha, uz bo'lishi kerak.
  3. meta charset yo'q edi — «» buzilishi mumkin edi.
  4. title qiymati — standart "Document". Uni aniq nom bilan almashtirdik.
  5. Paragraf head ichida edi. Ko'rinadigan kontent — body da.

3-mashq (qiyin): Choyxona saytining ikki sahifasi

choyxona papkasidagi index.html va menyu.html ni to'liq skeletga o'tkazing. Har biriga o'zining aniq title ini yozing. So'ng har bir sahifada Console'da document.compatMode ni tekshiring.

Bonus: menyu.html ning ruscha nusxasini menyu-ru.html nomi bilan yarating. Uning lang qiymati qanday bo'ladi?

Yechim

menyu.html:

html
<!DOCTYPE html>
<html lang="uz">
  <head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <title>Menyu va narxlar — Choyxona «Bahor»</title>
  </head>
  <body>
    <h1>Bugungi menyu</h1>
    <p>Osh — 35 000 so'm</p>
    <p>Kabob — 25 000 so'm</p>
  </body>
</html>

Ikkala sahifada ham document.compatMode 'CSS1Compat' qaytarishi kerak.

Ruscha nusxada lang="ru" bo'ladi, title va matnlar ham ruscha yoziladi. meta charset="utf-8" bu yerda ayniqsa muhim — kirill harflari ham noto'g'ri kodlashda buziladi.

12. Real ishda

  • Har bir loyiha shu skeletdan boshlanadi. React yoki Next.js'da ham (kursda alohida o'rganamiz) skelet bor, faqat uni ko'pincha freymvork yaratadi. Siz baribir uni tekshirishingiz va lang ni to'g'rilashingiz kerak bo'ladi.
  • "Harflar buzildi" muammosi real ishda ko'p uchraydi: eski fayllar, ma'lumotlar bazasi, email shablonlarida. Birinchi tekshiriladigan narsa — meta charset va faylning haqiqiy kodlashi.
  • Accessibility tekshiruvi. Lighthouse va boshqa audit vositalari lang yo'qligini xato deb ko'rsatadi. Bu haqda HTML sahifani audit qilish darsida gaplashamiz.
  • SEO. title — Google natijalarida birinchi ko'rinadigan matn. Marketologlar aynan shu satr uchun dasturchiga murojaat qiladi.

Xulosa

  • Skelet: <!DOCTYPE html> → html lang → head (meta charset, meta viewport, title) → body.
  • DOCTYPE'siz sahifa quirks mode'da ishlaydi; document.compatMode bilan tekshiriladi.
  • lang="uz" ekran o'quvchi, tarjimon va qidiruv tizimi uchun kerak.
  • head — sahifa haqida ma'lumot, body — ko'rinadigan kontent.
  • meta charset="utf-8" head ning eng tepasida turadi — aks holda harflar buzilishi mumkin.
  • title — yorliq, xatcho'p va Google natijasidagi nom; har sahifada bitta va aniq.

Keyingi dars: Emmet: HTML'ni qisqartmalar bilan tez yozish — shu skeletni bitta ! belgisi bilan bir soniyada yaratishni o'rganamiz.

Manbalar

  • MDN: "Quirks Mode and Standards Mode", "<html>: lang", "<meta>: charset" — developer.mozilla.org
  • WHATWG HTML: "The DOCTYPE", "Specifying the document's character encoding" — html.spec.whatwg.org
  • W3C Nu HTML Checker — validator.w3.org/nu
Ulashish:Telegram'da

Izohlar (0)

Izoh yozish uchun kiring.

  • Hozircha izoh yo'q. Birinchi bo'ling!
HTML hujjat skeleti: DOCTYPE, html, head va body — IlmHamroh