# HTML hujjat tuzilishi (DOCTYPE, head, body)

> HTML hujjatining to'liq skeletini o'rganing: DOCTYPE, html, head, meta, title va body qismlari, ularning vazifasi hamda to'g'ri joylashuvi.

Manba: https://learncode.uz/html-css/html-tuzilishi/
Sana: 2026-05-16

[Oldingi darsda](https://learncode.uz/html-css/html-nima) HTML teglar yordamida mazmunning
vazifasini belgilashini ko'rdik. Endi alohida elementlarni to'liq HTML
hujjatiga joylaymiz. Brauzer kichik xatolarni ko'pincha o'zi tuzatadi, ammo
standart skelet bilan yozilgan sahifa aniqroq, barqarorroq va boshqa
dasturchilar uchun o'qishga qulay bo'ladi.

Bu dars yakunida siz:

- HTML hujjatining asosiy qismlarini to'g'ri tartibda yoza olasiz;
- `<head>` va `<body>` vazifasini ajrata olasiz;
- sahifa tili, belgilar kodlashi va brauzer yorlig'idagi nomni belgilaysiz;
- tayyor skeletni yangi sahifalar uchun qolip sifatida ishlata olasiz.

## To'liq HTML skeleti

Zamonaviy HTML sahifa odatda quyidagi koddan boshlanadi:

```html
<!doctype html>
<html lang="uz">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mening birinchi saytim</title>
  </head>
  <body>
    <h1>Salom, dunyo!</h1>
    <p>Bu mening birinchi to'liq HTML sahifam.</p>
  </body>
</html>
```

Bu kodni birdan yodlash shart emas. Muhimi — har qism nima vazifa bajarishini
va qayerda joylashishini tushunish.

## `<!doctype html>` — hujjat turi

`<!doctype html>` brauzerga hujjat zamonaviy HTML standartida yozilganini
bildiradi. U teg emas va yopilish qismiga ega emas. Doctype faylning eng
birinchi qatorida yoziladi:

```html
<!doctype html>
```

Doctype yozilmasa, ayrim brauzerlar eski sahifalar bilan moslashish rejimiga
o'tishi mumkin. Bu rejimda o'lcham va joylashuv qoidalari kutilmagan tarzda
ishlashi ehtimoli bor.

> **Katta yoki kichik harf?**
>
> `<!DOCTYPE html>` va `<!doctype html>` bir xil ishlaydi. Loyihada bitta yozish
> uslubini tanlab, izchil ishlatish kifoya.

## `<html>` — hujjatning ildiz elementi

`<html>` elementi `<!doctype html>` dan boshqa barcha HTML kodini o'rab turadi.
U hujjat daraxtining eng yuqori, ya'ni **ildiz elementi** hisoblanadi.

```html
<html lang="uz">
  <!-- head va body shu yerda bo'ladi -->
</html>
```

`lang="uz"` atributi sahifaning asosiy tili o'zbekcha ekanini bildiradi.
Bu ma'lumot:

- ekran o'quvchiga so'zlarni to'g'ri talaffuz qilishga;
- brauzerga tarjima va imlo vositalarini tanlashga;
- qidiruv tizimiga sahifa tilini tushunishga yordam beradi.

Agar sahifa boshqa tilda bo'lsa, mos kod ishlatiladi: masalan, ingliz tili
uchun `lang="en"`, rus tili uchun `lang="ru"`.

## `<head>` — sahifa haqidagi ma'lumot

`<head>` ichidagi ma'lumotning asosiy qismi sahifaning o'zida ko'rinmaydi.
U brauzer, qidiruv tizimi va boshqa xizmatlarga hujjat haqida ma'lumot beradi.

Boshlanishida uchta element ayniqsa muhim:

```html
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML asoslari</title>
</head>
```

- `<meta charset="UTF-8">` matndagi harflarni qanday o'qishni belgilaydi;
- `viewport` mobil qurilmada sahifani ekran kengligiga moslaydi;
- `<title>` brauzer yorlig'ida ko'rinadigan sahifa nomini belgilaydi.

`UTF-8` o'zbekcha apostrofli so'zlar, lotin, kirill va boshqa ko'plab yozuv
tizimlarini qo'llab-quvvatlaydi. `charset` ni `<head>` boshiga yaqin yozish
tavsiya etiladi.

> **Title sahifa ichidagi sarlavha emas**
>
> `<title>` brauzer yorlig'i va qidiruv natijasi uchun nom beradi. Sahifa ichida
> foydalanuvchi ko'radigan asosiy sarlavha esa `<body>` ichidagi `<h1>` bilan
> yoziladi. Ularning matni o'xshash bo'lishi mumkin, lekin vazifasi boshqa.

## `<body>` — ko'rinadigan mazmun

Foydalanuvchi sahifada ko'radigan sarlavha, paragraf, rasm, havola, ro'yxat,
jadval va forma elementlari `<body>` ichida yoziladi.

Quyidagi natija oynasida faqat `body` ichidagi mazmun ko'rsatilgan:

```html
<header>
  <h1>Sayohat kundaligi</h1>
  <p>O'zbekiston bo'ylab ko'rgan joylarim haqida yozaman.</p>
</header>

<main>
  <h2>So'nggi yozuv</h2>
  <p>Bugun tog'lar orasidagi sokin ko'lga bordik.</p>
</main>

<footer>
  <p>Muallif: Dilshod</p>
</footer>
```

`<head>` ichidagi `<title>` natija oynasining mazmuniga qo'shilmaydi. Chunki
u hujjat haqida ma'lumot, `<body>` esa hujjatning foydalanuvchiga ko'rinadigan
qismidir.

## Brauzer hujjatni qanday o'qiydi?

Brauzer HTML faylini yuqoridan pastga o'qiydi va elementlardan daraxtga
o'xshash tuzilma hosil qiladi:

```text
html
├── head
│   ├── meta
│   └── title
└── body
    ├── h1
    └── p
```

Bu tuzilma keyinchalik **DOM** deb ataladi. CSS elementlarni shu tuzilma
orqali bezaydi, JavaScript esa ularni topib o'zgartira oladi. Hozircha
`html → head + body` munosabatini tushunish yetarli.

## Indentatsiya kodni o'qishni osonlashtiradi

Brauzer ko'p hollarda bo'sh joylarga e'tibor bermaydi, lekin dasturchi uchun
to'g'ri indentatsiya juda muhim. Ichki elementlarni odatda ikki bo'sh joy
surib yozing:

```html
<body>
  <main>
    <h1>Asosiy sarlavha</h1>
    <p>Paragraf matni.</p>
  </main>
</body>
```

Shunda qaysi element qaysi ota element ichida ekanini bir qarashda bilish
mumkin. Jamoada ishlaganda formatlash qoidalarining izchil bo'lishi kodni
tekshirish va xato topishni tezlashtiradi.

> **Ko'p uchraydigan xatolar**
>
> - Ko'rinadigan matnni `<head>` ichiga yozmang — u `<body>` ichida bo'lishi kerak.
> - `<title>` o'rniga `<h1>` ni `head` ichiga joylamang.
> - `<meta charset="UTF-8">` va `lang="uz"` ni tashlab ketmang.
> - `head` yoki `body` ni `html` elementidan tashqariga chiqarmang.

## Amaliy mashq

Yangi `index.html` fayli yarating va to'liq skeletni yozing. Sahifa tilini
o'zbekcha belgilang, yorliq nomiga `Mening portfoliom` deb yozing. `body`
ichiga o'z ismingiz yozilgan `<h1>` va o'rganayotgan mavzuingiz haqidagi
`<p>` qo'shing. Faylni brauzerda ochib, yorliqdagi nom bilan sahifa ichidagi
sarlavha boshqa joyda ko'rinishini tekshiring.

## Qisqacha xulosa

- `<!doctype html>` zamonaviy HTML hujjatini e'lon qiladi.
- `<html lang="uz">` butun hujjatni o'raydi va uning tilini bildiradi.
- `<head>` sahifa haqidagi, odatda ko'rinmaydigan ma'lumotlarni saqlaydi.
- `<meta charset="UTF-8">` belgilar kodlashini belgilaydi.
- `<title>` brauzer yorlig'idagi nomni beradi.
- `<body>` foydalanuvchi ko'radigan barcha mazmunni saqlaydi.

Keyingi darsda [sarlavhalar va paragraflar](https://learncode.uz/html-css/sarlavha-paragraf)
yordamida `<body>` ichidagi matnni tushunarli iyerarxiyaga ajratamiz.