HTML'da bo'sh joylar va qator uzish: br, wbr, hr, pre va nbsp

Qisqacha: Brauzer koddagi ketma-ket bo'sh joy, tab va yangi qatorlarni bitta bo'sh joyga yig'adi. Shuning uchun qatorni uzish uchun <br> kerak — lekin faqat manzil yoki she'r kabi qator muhim bo'lgan joyda. pre ichida esa bo'sh joylar aynan yozilgandek saqlanadi.   so'zlarni bir-biridan ajratmaydi, hr esa mavzu o'zgarganini bildiradi.

Bu darsda

• Brauzer bo'sh joylarni nega va qanday "yig'ishini" tushuntira olasiz.
• br ni qachon ishlatish to'g'ri, qachon xato ekanini ajratasiz.
• Uzun so'z va manzillarni wbr va ­ bilan telefonga moslaysiz.
• hr ning ma'nosini va pre ning qachon kerakligini bilasiz.
•   bilan "35 000 so'm" kabi yozuvlarni bo'linib ketishdan saqlaysiz.

Oldin bilishingiz kerak: Sarlavhalar va paragraflar.

1. Nega bu kerak?

O'tgan darsda g'alati narsani ko'rdik. Paragraf ichida Enter bosib yangi qatorga o'tdik — brauzer esa hammasini bitta qatorga yozdi.

Bu xato emas, balki HTML'ning qasddan qilingan qoidasi. Uni bilmasangiz, uzoq vaqt "nega matnim men yozgandek chiqmayapti?" deb qiynalasiz. Keyin esa uni "tuzatish" uchun yomon usullarni o'ylab topasiz: o'nlab <br>, qator-qator bo'sh joylar.

Bu darsda qoidaning o'zini va har bir holat uchun to'g'ri vositani ko'ramiz.

2. Qoida: bo'sh joylar yig'iladi

2.1 Tajriba

choyxona/index.html ga shu paragrafni qo'shing — bo'sh joylar ataylab tartibsiz:

<p>Choyxona      «Bahor»
        har kuni
ochiq.</p>

Brauzerda:

Choyxona «Bahor» har kuni ochiq.

Brauzer uch ishni qildi:

1. Ketma-ket bir nechta bo'sh joyni bitta bo'sh joyga aylantirdi.
2. Yangi qator va tab belgilarini ham oddiy bo'sh joy deb hisobladi.
3. Paragraf boshi va oxiridagi bo'sh joylarni olib tashladi.

Bu bo'sh joylarni yig'ish (whitespace collapsing) deyiladi. Inglizcha "whitespace" — bo'sh joy, tab va yangi qator belgilarining umumiy nomi.

2.2 Nega shunday qilingan?

Tasavvur qiling: HTML bo'sh joylarni saqlasa, kodni chekinish bilan chiroyli yozib bo'lmasdi. Har bir chekinish sahifada ham ko'rinardi. Formatlash darsida Prettier kodni tekislaganda, sahifa ko'rinishi ham o'zgarib ketardi.

Qoida tufayli kod ko'rinishi va sahifa ko'rinishi bir-biridan ajralgan. Kodni odam uchun xohlagancha tekislaysiz, brauzer esa matnni oyna kengligiga qarab o'zi joylashtiradi. Telefonda qator qisqa, kompyuterda uzun — lekin matn doim to'g'ri oqadi.

Tekshirib ko'ring: Brauzer <p>Osh — 35 000 so'm</p> ni qanday ko'rsatadi?

3. br — qator uzish

3.1 Qachon to'g'ri

br (inglizcha "break" — uzish) — matn ichida yangi qatorga o'tkazadi. U bo'sh element: yopuvchi tegi yo'q.

br faqat qatorning o'zi ma'noga ega bo'lgan joyda ishlatiladi. Eng yaxshi ikki misol — pochta manzili va she'r:

<p>
  Choyxona «Bahor»<br>
  Chilonzor tumani, 7-mavze, 15-uy<br>
  Toshkent, 100115
</p>

Brauzerda:

Choyxona «Bahor»
Chilonzor tumani, 7-mavze, 15-uy
Toshkent, 100115

Manzilni bitta qatorga yozsangiz, uni o'qish qiyinlashadi. Qator uzilishi bu yerda — ma'noning bir qismi.

She'rda ham shunday: har bir misra alohida qatorda turishi kerak.

<p>
  Bahor keldi, choyxonada<br>
  Osh damlandi, choy qaynadi.<br>
  Do'stlar yig'ildi davraga,<br>
  Gap-gashtaklar boshlandi.
</p>

Har bir misra oxirida br, butun to'rtlik esa bitta paragraf. Keyingi to'rtlik — yangi p.

3.2 Qachon xato

Paragraflarni ajratish uchun:

Osh tayyor.<br><br>
Kabob ham tayyor.<br><br>

Bular — alohida fikrlar, demak alohida paragraflar:

<p>Osh tayyor.</p>
<p>Kabob ham tayyor.</p>

Bo'sh joy yaratish uchun — <br><br><br>. Oraliq kattaligi — ko'rinish masalasi, u CSS'da margin bilan beriladi.

Ro'yxat uchun — "Osh<br>Kabob<br>Lag'mon". Ro'yxatning o'z tegi bor, uni Ro'yxatlar darsida ko'ramiz.

Oddiy qoida: agar br dan keyin yangi fikr boshlansa — bu yangi paragraf yoki boshqa element bo'lishi kerak. br faqat bitta fikr ichida qatorni uzadi.

Tekshirib ko'ring: Qaysi holatda br o'rinli?

1. Telefon raqami va ish vaqtini alohida qatorga yozish (kontakt kartasi).
2. Maqolaning ikki paragrafi orasida bo'sh qator qoldirish.
3. Menyudagi har bir taomni yangi qatordan yozish.

4. Uzun so'zlar: wbr va ­

Telefon ekrani tor. Brauzer matnni faqat bo'sh joylarda uzadi. Juda uzun so'z yoki manzil esa sig'masa, ekrandan chiqib ketadi va sahifa yon tomonga suriladigan bo'lib qoladi.

4.1 wbr — "shu yerda uzsang bo'ladi"

wbr (word break opportunity — "so'zni uzish imkoniyati") brauzerga ruxsat beradi: joy yetmasa, shu nuqtada uz. Joy yetsa — hech narsa bo'lmaydi.

Uzun manzil uchun eng qulay:

<p>Dars manzili:
  ilmhamroh.uz/<wbr>dasturlash/<wbr>04-qism-html/<wbr>08-dars
</p>

Kompyuterda manzil bitta qatorda chiqadi. Telefonda esa / belgilaridan keyin chiroyli uziladi. wbr ham bo'sh element.

4.2 ­ — defis bilan uzish

O'zbek tilida juda uzun so'zlar ko'p: "tushunmaganliklaringizdan", "o'zgartirilmaganligini". Ularni bo'g'in chegarasida defis bilan uzish chiroyliroq.

­ (soft hyphen — "yumshoq defis") aynan shuni qiladi. U odatda ko'rinmaydi. Faqat so'z aynan shu joyda uzilsa, qator oxirida defis paydo bo'ladi:

<p>Buyurtmangiz o'zgar&shy;tiril&shy;maganligini tekshiring.</p>

Keng ekranda: "o'zgartirilmaganligini". Tor ekranda esa masalan: "o'zgar-" va keyingi qatorda "tirilmaganligini".

­ — tegi yo'q, & bilan boshlanib ; bilan tugaydigan maxsus yozuv. Bunday yozuvlar entity deyiladi. Ularni Maxsus belgilar darsida batafsil ko'ramiz.

Maslahat: Har bir uzun so'zga ­ qo'yish charchatadi. CSS'da hyphens: auto xususiyati bor — brauzer so'zlarni o'zi bo'g'inlarga ajratadi. Lekin u sahifa tilini bilishi kerak. Hujjat skeleti darsidagi lang="uz" yana bir bor asqotadi.

5.   — ajralmas bo'sh joy

Endi teskari muammo. Ba'zi so'zlar hech qachon alohida qatorlarga bo'linmasligi kerak. Masalan, narx:

Bugungi osh narxi 35
000 so'm.

"35" bir qatorda, "000 so'm" keyingisida — o'quvchi "35 so'm"mi deb adashadi. O'zbekistonda minglar bo'sh joy bilan ajratiladi, shuning uchun bu muammo tez-tez uchraydi.

Yechim — ajralmas bo'sh joy (non-breaking space),  . U oddiy bo'sh joy kabi ko'rinadi, lekin brauzer uning ustidan qatorni uzmaydi:

<p>Bugungi osh narxi 35&nbsp;000&nbsp;so'm.</p>

Endi "35 000 so'm" doim birga: sig'masa, uchalasi birga keyingi qatorga o'tadi.

  qayerda kerak:

Diqqat:   ni bo'sh joy qo'yish uchun ishlatmang: Osh    35 000. Bu kodni o'qib bo'lmaydigan qiladi va telefonda matnni buzadi. Oraliq — CSS ishi.   faqat "bu ikki bo'lak ajralmasin" degan ma'noda.

Bo'sh joyni to'ldiring: ajralmas bo'sh joy entity'si & bilan boshlanadi, ; bilan tugaydi. O'rtasidagi so'z qaysi?

6. hr — mavzu o'zgardi

hr — sahifada gorizontal chiziq chizadi. Lekin uning ma'nosi chiziq emas.

Zamonaviy HTML'da hr — tematik uzilish (thematic break): "bu yerda mavzu o'zgardi". Kitobda bob ichidagi voqea joyi o'zgarganda qo'yiladigan uch yulduzcha (* * *) kabi.

<h2>Bugungi menyu</h2>
<p>Osh — 35 000 so'm. Kabob — 25 000 so'm.</p>

<hr>

<p>Diqqat: dushanba kuni choyxona sanitariya kuni sababli yopiq.</p>

Menyu va e'lon — ikki xil mavzu. hr ularni ajratadi. Ekran o'quvchi ham bu yerda "ajratgich" deb aytadi.

hr bo'sh element. Uning ko'rinishini — qalinligi, rangi yoki umuman ko'rinmasligini — CSS belgilaydi.

hr ni bezak uchun ishlatmang: sarlavha ostiga chiroyli chiziq kerak bo'lsa — bu CSS border. hr faqat mavzu chegarasi uchun.

7. pre — matnni aynan yozilgandek ko'rsatish

Ba'zan bo'sh joylar ma'noning bir qismi bo'ladi. Masalan, chek: ustunlar bo'sh joylar bilan tekislangan. Yig'ish qoidasi hammasini buzib yuboradi.

pre (preformatted — "oldindan formatlangan") ichida qoida o'chadi. Bo'sh joylar, tablar va yangi qatorlar aynan saqlanadi:

<pre>
CHOYXONA «BAHOR»
--------------------
Osh x2        70 000
Choy x1        5 000
--------------------
Jami:         75 000
</pre>

Brauzerda:

CHOYXONA «BAHOR»
--------------------
Osh x2        70 000
Choy x1        5 000
--------------------
Jami:         75 000

Brauzer pre ni bir xil kenglikdagi shrift (monospace) bilan ko'rsatadi. Unda har bir harf bir xil joy egallaydi — shuning uchun ustunlar tekis chiqadi.

Uchta muhim detal:

1. <pre> dan keyingi birinchi yangi qatorni brauzer tashlab yuboradi. Shuning uchun matnni ochuvchi tegdan keyingi qatordan boshlash mumkin — ortiqcha bo'sh qator paydo bo'lmaydi.
2. Koddagi chekinish ham saqlanadi. pre ichidagi qatorlarni surib qo'ysangiz, sahifada ham surilgan chiqadi.
3. Uzun qatorlar uzilmaydi. Telefonda ular ekrandan chiqib ketishi mumkin.

pre ning eng ko'p ishlatiladigan joyi — dastur kodini ko'rsatish. Buni Kod va texnik matn darsida ko'ramiz.

Tekshirib ko'ring: Nega chekni pre siz, oddiy p ichida yozsak, ustunlar buziladi?

8. Ko'p uchraydigan xatolar

Bu yerdagi xatolarni validator ko'rsatmaydi — <br><br><br> HTML qoidalariga to'g'ri. Ular ma'no va ko'rinish xatolari.

8.1 "Chekinish" uchun  

<p>&nbsp;&nbsp;&nbsp;&nbsp;Choyxonamiz 1998-yilda ochilgan.</p>

Maqsad — kitobdagi kabi paragraf boshida chekinish. Natija: telefonda qator g'alati boshlanadi, kodni o'qib bo'lmaydi. Tuzatish: chekinishni CSS'da text-indent bilan beramiz.

8.2 Kod sahifasidagi chekinish pre da ko'rinib qoldi

<body>
  <pre>
    Osh x2    70 000
    Choy x1    5 000
  </pre>
</body>

Sahifada har bir qator boshida 4 ta bo'sh joy chiqadi — chunki pre koddagi chekinishni ham saqlaydi. Tuzatish: pre ichidagi matnni chap chetdan boshlang.

8.3 Telefonda sahifa yon tomonga suriladi

Sababi ko'pincha — uzilmaydigan uzun satr: uzun manzil, pre dagi uzun qator yoki ko'p   bilan yopishtirilgan matn. Tuzatish: manzilga wbr qo'shing,   ni faqat 2–3 so'z uchun ishlating. pre uchun CSS yechimini keyinroq ko'ramiz. Tekshirish uchun DevTools'dagi telefon rejimi (DevTools darsida ko'rgansiz) qulay.

9. Mashqlar

1-mashq (oson): Brauzer nima ko'rsatadi?

Natijani qog'ozga yozing, keyin brauzerda tekshiring:

<p>   Ko'k    choy
      —   5 000
so'm   </p>

Ko'k choy — 5 000 so'm

2-mashq (o'rta): Kontakt kartasi

choyxona/aloqa.html ga kontakt kartasini yozing. Qatorlar alohida chiqsin: choyxona nomi, manzil, telefon (+998 90 000 00 00), ish vaqti. Telefon raqami hech qachon ikkiga bo'linmasin. Kartadan keyin mavzu o'zgarishini bildiring va "Yetkazib berish shartlari" haqida bitta paragraf yozing.

<p>
  Choyxona «Bahor»<br>
  Chilonzor tumani, 7-mavze, 15-uy<br>
  Tel.: +998&nbsp;90&nbsp;000&nbsp;00&nbsp;00<br>
  Har kuni 7:00–23:00
</p>

<hr>

<p>Chilonzor tumani ichida yetkazib berish bepul.</p>

3-mashq (qiyin): Chek va uzun manzil

choyxona/chek.html sahifasini yarating:

1. pre ichida uchta taomli chek (nomi, soni, narxi — tekis ustunlarda) va jami summa.
2. Chek ostida paragraf: "Chekni onlayn tekshirish: " va uzun manzil example.com/cheklar/2026/sentyabr/000123. Manzil telefonda / belgilaridan keyin uzilsin.
3. DevTools telefon rejimida tekshiring: sahifa yon tomonga surilmasin.

<pre>
CHOYXONA «BAHOR»     27.09.2026
-------------------------------
Osh          x2          70 000
Lag'mon      x1          28 000
Ko'k choy    x3          15 000
-------------------------------
Jami:                   113 000
</pre>

<p>Chekni onlayn tekshirish:
  example.com/<wbr>cheklar/<wbr>2026/<wbr>sentyabr/<wbr>000123
</p>

10. Real ishda

• Narx va sanalar. Onlayn do'konlar va bank ilovalarida "35 000 so'm" yoki "27-sentyabr" ning bo'linib ketishi — tez-tez uchraydigan kichik, lekin xunuk xato.   — uning birinchi davosi.
• CSS bilan birga. Bo'sh joy qoidasini CSS'dagi white-space xususiyati boshqaradi. pre aslida shu xususiyatning maxsus qiymati bilan ishlaydi. Buni CSS qismida ko'ramiz.
• Ma'lumotlar bazasidagi matn. Foydalanuvchi izohida yozgan yangi qatorlari saytda yo'qolib qolishi — dasturchilarning mashhur savoli. Sababi — shu darsdagi qoida.
• Telefon uchun sifat. "Sahifa yon tomonga suriladi" degan shikoyatlarning ko'pchiligi uzun uzilmaydigan satrlardan. wbr va ­ ni bilgan dasturchi uni tez tuzatadi.

Xulosa

• Brauzer ketma-ket bo'sh joy, tab va yangi qatorlarni bitta bo'sh joyga yig'adi — kod ko'rinishi sahifa ko'rinishidan ajralgan.
• br — faqat qator ma'noli joyda: manzil, she'r, kontakt; paragraf va oraliq uchun emas.
• wbr — uzish mumkin bo'lgan nuqta; ­ — kerak bo'lsa defis bilan uzish.
•   — ajralmas bo'sh joy: "35 000 so'm", "25 km"; chekinish uchun emas.
• hr — tematik uzilish (mavzu o'zgardi), bezak chizig'i emas.
• pre bo'sh joylarni aynan saqlaydi va monospace shriftda ko'rsatadi.

Keyingi dars: Urg'u va ahamiyat teglari — strong, em, mark va boshqa teglar bilan matndagi muhim so'zlarni to'g'ri belgilash.

Manbalar

• MDN: "How whitespace is handled by HTML, CSS, and in the DOM" — developer.mozilla.org
• MDN: <br>, <wbr>, <hr>, <pre> — developer.mozilla.org