# HTML nima va veb-sahifa qanday tuziladi

> HTML nima, teg va element qanday ishlaydi? Birinchi HTML kodini yozing, brauzerdagi natijasini ko'ring va veb-sahifa tuzilishining asosini o'rganing.

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

![HTML kodi sarlavha, paragraf va rasm ko'rinishida brauzer sahifasiga aylanishini ko'rsatuvchi grafik](https://learncode.uz/images/html-css/html-nima-hero.webp)

*HTML koddagi teglarni brauzer tushunadigan sahifa tuzilishiga aylantiradi.*

Brauzerda ko'radigan sarlavha, matn, rasm, havola va tugmalar o'z-o'zidan
paydo bo'lmaydi. Dasturchi ularning sahifadagi vazifasini **HTML** yordamida
belgilaydi. Brauzer esa HTML kodini o'qib, foydalanuvchi ko'radigan sahifaga
aylantiradi.

Bu dars yakunida siz:

- HTML nima uchun ishlatilishini tushuntira olasiz;
- teg, element va kontent orasidagi farqni bilasiz;
- oddiy HTML kodini yozib, natijasini brauzerda ko'ra olasiz;
- HTML, CSS va JavaScript vazifalarini bir-biridan ajrata olasiz.

## HTML nima?

**HTML** — *HyperText Markup Language*, ya'ni gipermatnni belgilash tili.
U veb-sahifadagi mazmunning **tuzilishi** va **ma'nosini** ifodalaydi.

Masalan, oddiy matnning o'zi brauzerga uning vazifasini aytmaydi:

```text
HTML o'rganishni boshladim
```

Shu matnni `<h1>` tegi bilan belgilasak, brauzer uni sahifaning asosiy
sarlavhasi deb tushunadi:

```html
<h1>HTML o'rganishni boshladim</h1>
```

HTML brauzerga taxminan shunday ko'rsatmalar beradi:

- `<h1>` — bu asosiy sarlavha;
- `<p>` — bu paragraf;
- `<a>` — bu boshqa manzilga olib boruvchi havola;
- `<img>` — bu rasm;
- `<button>` — bu foydalanuvchi bosishi mumkin bo'lgan tugma.

> **Nega HTML dasturlash tili emas?**
>
> HTML hisob-kitob qilmaydi, shart tekshirmaydi va buyruqlar ketma-ketligini
> bajarmaydi. U kontentning tuzilishi va ma'nosini **belgilaydi**. Shu sababli
> HTML dasturlash tili emas, belgilash tili hisoblanadi.

## Teg, element va kontent

HTML yozishda uchta atama tez-tez uchraydi: **teg**, **element** va
**kontent**. Quyidagi misolni ko'ring:

```html
<p>Bu mening birinchi paragrafim.</p>
```

Bu yerda:

| Qism | Nomi | Vazifasi |
|---|---|---|
| `<p>` | ochilish tegi | paragraf qayerda boshlanishini bildiradi |
| `Bu mening birinchi paragrafim.` | kontent | foydalanuvchi ko'radigan mazmun |
| `</p>` | yopilish tegi | paragraf qayerda tugashini bildiradi |
| `<p>...</p>` | HTML elementi | ochilish tegi, kontent va yopilish tegining jami |

Yopilish tegida teg nomidan oldin `/` belgisi yoziladi. Masalan, `<h2>`
elementi `</h2>` bilan, `<p>` elementi esa `</p>` bilan yopiladi.

> **Hamma teglar juft emas**
>
> `<img>`, `<input>` va `<br>` kabi ayrim elementlar ichida matn saqlamaydi.
> Shuning uchun ularga alohida yopilish tegi kerak emas. Bunday elementlar
> keyingi darslarda alohida misollar bilan ko'rib chiqiladi.

## Birinchi HTML natijasi

Quyidagi kodda sarlavha, paragraf, kichik sarlavha, ro'yxat va havola bor.
Kod ostidagi **Natija** oynasida brauzer ularni qanday ko'rsatishini darhol
ko'rishingiz mumkin.

```html
<h1>Mening birinchi sahifam</h1>
<p>Men HTML yordamida veb-sahifa tuzishni o'rganyapman.</p>

<h2>Bugungi rejam</h2>
<ul>
  <li>Sarlavha yozish</li>
  <li>Paragraf qo'shish</li>
  <li>Natijani brauzerda ko'rish</li>
</ul>

<a href="#">Batafsil o'qish</a>
```

Brauzer teglarning o'zini ko'rsatmaydi. U teglar bildirgan ma'noga qarab
natijani chizadi: `<h1>` katta sarlavha, `<p>` oddiy paragraf, `<ul>` esa
belgili ro'yxat ko'rinishida chiqadi.

Hozircha natijaning shrift o'lchami va bo'shliqlarini brauzerning standart
stili belgilayapti. Keyinchalik **CSS** yordamida bu ko'rinishni o'zimiz
boshqaramiz.

## Elementlar ichma-ich joylashadi

Haqiqiy sahifa bir nechta alohida tegdan emas, bir-birining ichiga joylangan
elementlardan tuziladi. Masalan, maqola ichida sarlavha va paragraflar bo'lishi
mumkin:

```html
<article>
  <h2>HTML haqida</h2>
  <p>HTML sahifaning tuzilishini belgilaydi.</p>
</article>
```

Bu misolda `<article>` **ota element**, uning ichidagi `<h2>` va `<p>` esa
**farzand elementlar** hisoblanadi. Ichma-ich yozilgan kodni o'qish oson
bo'lishi uchun farzand elementlar odatda ikki bo'sh joy bilan ichkariga
suriladi. Bu usul **indentatsiya** deyiladi.

> **Teglarni to'g'ri tartibda yoping**
>
> Ichkarida ochilgan element birinchi yopiladi. Masalan,
> `<p><strong>Muhim</strong></p>` to'g'ri, chunki avval `<strong>`, keyin `<p>`
> yopilgan. Teglar tartibini aralashtirish noto'g'ri tuzilishga olib keladi.

## Atribut elementga qo'shimcha ma'lumot beradi

Ba'zi elementlarga faqat teg nomi yetarli emas. Masalan, havola qayerga olib
borishini ham ko'rsatish kerak. Bunday qo'shimcha ma'lumot **atribut** orqali
yoziladi:

```html
<a href="https://learncode.uz">LearnCode saytiga o'tish</a>
```

Bu yerda:

- `a` — havola elementining nomi;
- `href` — manzilni bildiradigan atribut;
- `https://learncode.uz` — atributning qiymati;
- `LearnCode saytiga o'tish` — foydalanuvchi ko'radigan havola matni.

Atribut ochilish tegi ichida yoziladi. Uning qiymatini qo'shtirnoq ichida
yozish kodni aniq va barqaror qiladi.

## HTML, CSS va JavaScript farqi

Frontend sahifa odatda uchta asosiy texnologiya bilan quriladi. Ularning
vazifalari bir-biridan farq qiladi:

| Texnologiya | Asosiy vazifasi | Oddiy misol |
|---|---|---|
| **HTML** | sahifaning tuzilishi va mazmuni | sarlavha, paragraf, forma |
| **CSS** | elementlarning ko'rinishi va joylashuvi | rang, shrift, masofa |
| **JavaScript** | sahifaning xatti-harakati | menyuni ochish, hisoblash |

Buni uyga o'xshatish mumkin: HTML — xonalar va devorlar, CSS — bezak va
joylashuv, JavaScript esa chiroq, eshik va boshqa ishlaydigan tizimlardir.
Uchovining vazifasi boshqa-boshqa, lekin ular birgalikda to'liq veb-sahifa
hosil qiladi.

## HTML faylini qanday ochish mumkin?

Birinchi HTML faylingizni yaratish uchun murakkab dastur shart emas:

1. Kompyuteringizda oddiy matn muharririni oching.
2. Quyidagi kodni yozing: `<h1>Salom, dunyo!</h1>`.
3. Faylni `index.html` nomi bilan saqlang.
4. Fayl ustiga ikki marta bosib, uni brauzerda oching.
5. Kodni o'zgartirgandan keyin faylni saqlang va brauzerni yangilang.

`.html` kengaytmasi operatsion tizim va brauzerga bu oddiy matn emas, HTML
hujjati ekanini bildiradi. Ko'p loyihalarda bosh sahifa fayli `index.html`
deb nomlanadi.

> **Mustaqil mashq**
>
> Yuqoridagi jonli misoldagi kodni o'zgartirib ko'ring: o'zingiz haqingizda
> sarlavha yozing, uchta qiziqishingizni ro'yxatga qo'shing va oxirida sevimli
> saytingizga havola yarating. Natijada teglar emas, ular ifodalagan sahifa
> ko'rinishini ko'rishingiz kerak.

## Ko'p uchraydigan xatolar

- yopilish tegidagi `/` belgisini unutish: `<p>Matn<p>`;
- teg nomini xato yozish: `<paragraf>` o'rniga `<p>` ishlatiladi;
- elementlarni noto'g'ri tartibda yopish;
- faylni `index.html.txt` ko'rinishida saqlab qo'yish;
- kod o'zgargach, faylni saqlamasdan brauzerni yangilash.

Brauzer ayrim xatolarni o'zi tuzatishga urinadi. Lekin sahifa ko'rinib turgani
kod mutlaqo to'g'ri degani emas. Teglarni tartibli yozish keyingi darslarda
murakkabroq sahifalarni tushunishni osonlashtiradi.

## Qisqacha xulosa

- HTML veb-sahifaning tuzilishi va mazmun ma'nosini belgilaydi.
- Teg elementning boshlanishi yoki tugashini bildiradi.
- Element ochilish tegi, kontent va ko'pincha yopilish tegidan tuziladi.
- Elementlar bir-birining ichiga joylashishi mumkin.
- Atribut elementga manzil kabi qo'shimcha ma'lumot beradi.
- HTML tuzilish, CSS ko'rinish, JavaScript esa xatti-harakat uchun ishlatiladi.

Keyingi darsda [HTML hujjat tuzilishi](https://learncode.uz/html-css/html-tuzilishi) bilan tanishib,
`<!doctype html>`, `<html>`, `<head>` va `<body>` qismlaridan iborat to'liq
sahifa skeletini yozamiz.