# HTML sarlavhalar va paragraflar (h1–h6, p)

> HTML'da h1–h6 sarlavhalari va p paragrafini to'g'ri ishlatish, matn iyerarxiyasini qurish, bo'sh joy va br tegining vazifasini o'rganing.

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

[HTML hujjat skeletida](https://learncode.uz/html-css/html-tuzilishi) foydalanuvchi ko'radigan
mazmun `<body>` ichida yozilishini o'rgandik. Endi shu mazmunni sarlavhalar va
paragraflar yordamida tartibli tuzamiz. Yaxshi tuzilgan matnni ko'z bilan
ko'rish, ekran o'quvchi bilan tinglash va qidiruv tizimi orqali tushunish oson.

Bu dars yakunida siz:

- `<h1>` dan `<h6>` gacha bo'lgan sarlavha darajalarini farqlaysiz;
- sahifa uchun mantiqiy sarlavha iyerarxiyasini tuzasiz;
- oddiy matnni `<p>` elementlari bilan paragraflarga ajratasiz;
- yangi qator, yangi paragraf va oddiy bo'sh joy orasidagi farqni bilasiz.

## Sarlavha matnning xaritasidir

Sarlavha o'quvchiga keyingi matn nima haqida ekanini oldindan bildiradi.
HTML oltita sarlavha darajasini beradi:

```html
<h1>Sahifaning asosiy mavzusi</h1>
<h2>Asosiy bo'lim</h2>
<h3>Bo'lim ichidagi mavzu</h3>
<h4>Yanada kichik bo'lim</h4>
<h5>Beshinchi daraja</h5>
<h6>Oltinchi daraja</h6>
```

Raqam sarlavhaning tashqi o'lchamini emas, **mantiqiy darajasini** bildiradi.
`<h1>` eng yuqori daraja, `<h2>` uning asosiy bo'limlari, `<h3>` esa shu
bo'limlar ichidagi kichik mavzular uchun ishlatiladi.

> **Sarlavha — bezak emas**
>
> Matnni katta yoki qalin ko'rsatish uchun sarlavha tegini tanlamang. HTML teg
> mazmunning vazifasini, CSS esa uning ko'rinishini belgilaydi. Kichik ko'ringan
> `<h2>` ham noto'g'ri joydagi `<h1>` dan semantik jihatdan to'g'riroq bo'lishi
> mumkin.

## Mantiqiy iyerarxiya qanday quriladi?

Sahifani kitob mundarijasiga o'xshating. Bitta aniq mavzu, uning bo'limlari
va bo'lim ichidagi kichik mavzular bo'ladi:

```html
<h1>O'zbekiston bo'ylab sayohat</h1>

<h2>Toshkent</h2>
<p>Poytaxtdagi diqqatga sazovor joylar haqida.</p>

<h3>Chorsu bozori</h3>
<p>Bozor tarixi va u yerda ko'rish mumkin bo'lgan mahsulotlar.</p>

<h3>Amir Temur xiyoboni</h3>
<p>Shahar markazidagi mashhur xiyobon haqida.</p>

<h2>Samarqand</h2>
<p>Tarixiy obidalar va sayohat tavsiyalari.</p>
```

Bu tuzilmada `Toshkent` va `Samarqand` bir xil darajadagi bo'limlar. Chorsu
bozori esa faqat Toshkent bo'limiga tegishli kichik mavzu bo'lgani uchun
`<h3>` bilan yozilgan.

Odatdagi kontent sahifasida bitta aniq `<h1>` ishlatish tavsiya etiladi.
Keyingi sarlavhalarni tartibli tanlang va faqat tashqi ko'rinish uchun
darajani almashtirmang.

## Paragraf — bog'langan fikrlar guruhi

Oddiy matn `<p>` (*paragraph*) elementi bilan yoziladi:

```html
<p>HTML sahifaning tuzilishini belgilaydi.</p>
<p>CSS esa elementlarning ko'rinishini boshqaradi.</p>
```

Har bir paragraf bitta asosiy fikrni ifodalashi kerak. Fikr o'zgarsa, yangi
`<p>` boshlash matnni o'qishni osonlashtiradi. Brauzer paragraflar orasiga
standart tashqi bo'shliq qo'yadi.

Quyidagi misolda sarlavha va paragraflar birgalikda qanday iyerarxiya
hosil qilishini ko'ring:

```html
<h1>Frontend dasturchi bo'lish yo'li</h1>
<p>Frontend dasturchi foydalanuvchi ko'radigan va boshqaradigan interfeysni yaratadi.</p>

<h2>Avval HTML</h2>
<p>HTML sahifadagi mazmun va uning mantiqiy tuzilishini belgilaydi.</p>

<h2>Keyin CSS</h2>
<p>CSS rang, shrift, masofa va elementlarning joylashuvini boshqaradi.</p>

<h3>Amaliy tavsiya</h3>
<p>Har yangi mavzudan keyin kichik sahifa yaratib ko'ring.</p>
```

Natijada sarlavhalar matnni bo'limlarga ajratadi, paragraflar esa har bir
bo'limdagi fikrni tushuntiradi. Brauzerning standart o'lchamlari keyinchalik
CSS bilan o'zgarishi mumkin, lekin HTML iyerarxiyasi o'zgarmaydi.

## HTML ketma-ket bo'sh joylarni qisqartiradi

Kod ichida bir nechta bo'sh joy yoki yangi qator yozsangiz ham, brauzer ularni
odatda bitta bo'sh joy sifatida ko'rsatadi:

```html
<p>Bu        jumlada     ko'p bo'sh joy bor.</p>
```

Brauzerdagi natija esa taxminan shunday bo'ladi:

```text
Bu jumlada ko'p bo'sh joy bor.
```

Matn orasini ochish uchun ketma-ket bo'sh joy qo'shish to'g'ri usul emas.
Ko'rinishdagi masofalar keyinchalik CSS bilan boshqariladi.

## Yangi paragraf va yangi qator farqi

Yangi fikr uchun yangi `<p>` ishlating. Bir paragraf ichida majburiy qator
uzilishi kerak bo'lsa, `<br>` elementidan foydalanish mumkin:

```html
<p>
  Toshkent shahri<br>
  Amir Temur ko'chasi, 1-uy
</p>
```

`<br>` manzil, she'r satri yoki aniq qator uzilishi mazmunning bir qismi
bo'lgan holatlarda mos keladi. Oddiy matnni paragraflarga ajratish yoki
elementlar orasida masofa yaratish uchun ko'p `<br>` ishlatmang.

> **Sarlavha darajasini ko'rinishga qarab tanlamang**
>
> `<h1>` dan birdan `<h4>` ga o'tish ko'pincha tuzilmaning bir qismi yo'qolganini
> bildiradi. Har doim mutlaq ravishda barcha darajani ishlatish shart emas,
> lekin mavjud bo'limlar orasidagi ota-farzand munosabati mantiqiy bo'lishi
> kerak.

## Nega to'g'ri sarlavhalar muhim?

To'g'ri iyerarxiya uch guruhga yordam beradi:

- **o'quvchi** sahifani tez ko'zdan kechirib, kerakli bo'limni topadi;
- **ekran o'quvchi foydalanuvchisi** sarlavhalar bo'yicha sakrab yuradi;
- **qidiruv tizimi** sahifaning asosiy va yordamchi mavzularini tushunadi.

Shuning uchun sarlavhani faqat dizayn elementi emas, hujjat navigatsiyasining
bir qismi deb qarash kerak.

## Amaliy mashq

`Mening o'quv rejam` nomli sahifa mazmunini yozing. Bitta `<h1>`, kamida
ikkita `<h2>`, bitta `<h3>` va har sarlavhadan keyin tushuntiruvchi `<p>`
ishlating. Kodga qarab turib, sarlavhalardan mundarija tuzish mumkinligini
tekshiring.

## Qisqacha xulosa

- `<h1>`–`<h6>` sarlavhaning mantiqiy darajasini bildiradi.
- Odatdagi sahifada bitta aniq `<h1>` ishlatish yaxshi amaliyotdir.
- `<h2>` asosiy bo'lim, `<h3>` esa uning ichidagi kichik bo'lim bo'lishi mumkin.
- `<p>` bog'langan fikrlarni alohida paragrafga ajratadi.
- Ketma-ket bo'sh joylar matnni joylashtirish vositasi emas.
- `<br>` faqat qator uzilishi mazmunan kerak bo'lganda ishlatiladi.

Keyingi darsda [HTML matn formatlash](https://learncode.uz/html-css/matn-formatlash) orqali
paragraf ichidagi muhim, urg'uli va maxsus matnlarni semantik belgilaymiz.