HTML urg'u teglari: strong va b, em va i, mark, small, s, del, sub, sup

Qisqacha: HTML'da qalin va kursiv matnning har biri o'z ma'nosiga ega. Muhim ogohlantirish strong bilan, gap ma'nosini o'zgartiruvchi urg'u esa em bilan belgilanadi. Muhimliksiz ajratish uchun b, chet so'z yoki atama uchun i ishlatiladi. Qidiruvga mos joy — mark, eskirgan narx — s, mayda izoh — small, indekslar — sub va sup.

Bu darsda

• strong va b, em va i farqini aniq tushuntira olasiz.
• Gap ma'nosini em bilan qanday o'zgartirish mumkinligini ko'rasiz.
• mark, small, s, del va u ni o'z joyida ishlatasiz.
• Kimyo, matematika va izohlar uchun sub va sup ni qo'llaysiz.
• "Qaysi tegni tanlash kerak?" savoliga oddiy algoritm bilan javob berasiz.

Oldin bilishingiz kerak: Sarlavhalar va paragraflar, Teg, element va atribut.

1. Nega bu kerak?

Choyxona saytida e'lon bor: "Ertaga choyxona yopiq". Bu so'zlar ko'zga tashlanishi kerak. Qanday qilish mumkin?

Boshlovchi darhol "qalin qilaman" deydi. HTML'da esa qalin ko'rsatadigan ikkita teg bor — strong va b. Kursiv uchun ham ikkita — em va i. Ekranda ular bir xil ko'rinadi. Unda nega ikkitadan?

Javob HTML nima darsidagi asosiy g'oyada: HTML ko'rinishni emas, ma'noni belgilaydi. Qalin matn "bu muhim" degani ham bo'lishi mumkin, "bu shunchaki mahsulot nomi" degani ham. Bu darsda har bir teg qaysi ma'noni bildirishini o'rganamiz.

2. strong va b

2.1 strong — muhimlik

strong — "bu matn muhim, jiddiy yoki shoshilinch". Ogohlantirishlar, xavf, "buni albatta o'qing" degan joylar:

<p><strong>Diqqat:</strong> ertaga choyxona yopiq.</p>
<p>Taomda yong'oq bor. <strong>Allergiyangiz bo'lsa,
buyurtma bermang.</strong></p>

Ikkinchi misolda strong — sog'liq uchun muhim ogohlantirish. Uni o'qimaslik oqibatga olib keladi.

strong ichiga yana strong qo'ysangiz, ahamiyat yanada oshadi. Lekin amalda bu kam kerak.

2.2 b — muhim emas, lekin ajralib tursin

b — "bu so'zni ko'zga tashlanadigan qil, lekin u boshqalardan muhimroq emas". Masalan:

• Sharhdagi mahsulot nomlari.
• Matndagi kalit so'zlar.
• Maqolaning birinchi, kirish gapi.

<p><b>Toshkent oshi</b> va <b>Samarqand oshi</b> farqi —
guruch va sabzi to'g'rashda.</p>

Taom nomlari ajralib turadi — o'quvchi ularni tez topadi. Lekin ular "ogohlantirish" emas.

2.3 Farqi amalda nimada?

Ekranda ikkalasi ham qalin. Farq — sahifaning "ichki" tavsifida. Brauzer strong ni DOM'da "muhim matn" deb belgilaydi, b ni esa oddiy ko'rinish farqi deb.

Halol bo'laylik: bugungi ekran o'quvchilarning ko'pchiligi standart sozlamada strong ni ovoz ohangi bilan ajratmaydi. Lekin ma'no sahifada saqlanadi. Uni qidiruv tizimlari, brauzerdagi "o'qish rejimi" (Reader Mode), tarjimonlar va AI yordamchilar ishlatishi mumkin. Eng muhimi — kodni o'qiydigan boshqa dasturchi niyatingizni darhol tushunadi.

Qoida oddiy: muhim bo'lsa — strong, shunchaki ajralib tursin desangiz — b. Shubha bo'lsa — strong.

3. em va i

3.1 em — urg'u gap ma'nosini o'zgartiradi

em (emphasis — "urg'u") — gapda qaysi so'zga ovoz bilan urg'u berilishini bildiradi. Ovoz chiqarib o'qiganda o'sha so'z kuchliroq aytiladi.

O'zbek tilida bitta gap urg'uga qarab uch xil ma'no beradi:

<p><em>Men</em> osh yemadim.</p>
<p>Men <em>osh</em> yemadim.</p>
<p>Men osh <em>yemadim</em>.</p>

Ko'ryapsizmi? So'zlar bir xil, ma'no esa urg'uga qarab o'zgaradi. em aynan shuni belgilaydi.

3.2 i — boshqa ohang, urg'usiz

i — "bu matn atrofidagidan boshqacha ohangda": lekin urg'u yo'q. Odatda kursiv yoziladigan narsalar:

• Chet tilidagi so'zlar: <i lang="en">deadline</i>.
• Ilmiy atamalar: <i>Oryza sativa</i> (guruchning lotincha nomi).
• Ichki fikr: <i>Yana osh tugab qolmasa edi</i>, — deb o'yladi Jasur.

Chet so'zga lang atributi qo'shilgani e'tiborga loyiq. Hujjat skeleti darsida lang ni butun sahifaga qo'ygan edik. U alohida so'zga ham qo'yiladi — shunda ekran o'quvchi "deadline" ni inglizcha talaffuz bilan o'qiydi.

Tekshirib ko'ring: Qaysi holatda em, qaysisida i kerak?

1. "Bu juda achchiq, ehtiyot bo'ling!"
2. Matndagi inglizcha "feedback" so'zi.
3. Kemaning nomi "Titanic".

4. mark — shu yerga qarang

mark — matnning hozirgi vaziyatda tegishli qismini belgilaydi. Brauzer uni sariq fon bilan ko'rsatadi — xuddi darslikdagi marker kabi.

Eng yaxshi misol — qidiruv natijalari. Foydalanuvchi menyudan "osh" ni qidirdi:

<p>Toshkent <mark>osh</mark>i — 35 000 so'm</p>
<p>Samarqand <mark>osh</mark>i — 38 000 so'm</p>

mark "bu muhim" demaydi — buning uchun strong bor. U "siz qidirgan narsa shu yerda" deydi.

Yana bir misol — birovning so'zini keltirib, uning bir qismiga e'tibor qaratish: <p>Mijoz yozdi: "Osh zo'r, lekin <mark>choy sovuq edi</mark>"</p>.

5. small — mayda izoh

small — asosiy matnga qo'shimcha, mayda izoh: huquqiy eslatmalar, shartlar, mualliflik huquqi.

<p>Osh — 35 000 so'm</p>
<p><small>Narxlar QQS bilan. Xizmat haqi 10%.</small></p>

Sahifa pastidagi mualliflik yozuvi ham small ga yaxshi mos keladi: <small>© 2026 Choyxona «Bahor»</small>.

small ni "matnni kichraytirish" uchun ishlatmang. Agar matn izoh bo'lmasa-yu, faqat kichikroq ko'rinishi kerak bo'lsa — bu CSS font-size.

6. s va del — ustidan chizilgan matn

Ikkalasi ham matnni ustidan chizib ko'rsatadi. Farqi — nega chizilgani.

6.1 s — endi to'g'ri emas

s — "bu ma'lumot eskirdi, lekin ko'rsatib qo'yamiz". Eng klassik misol — chegirmadagi eski narx:

<p>Osh: <s>40 000 so'm</s> 35 000 so'm</p>

Eski narx kerak — xaridor chegirmani ko'rsin. Lekin u endi amalda emas.

6.2 del — hujjatdan o'chirildi

del (delete) — hujjat tahrirlanganda olib tashlangan qism. U tahrir tarixini ko'rsatadi:

<p>Yig'ilish <del>dushanba</del> seshanba kuni bo'ladi.</p>

"Dushanba" xato edi va tuzatildi. del ko'pincha yangi matnni bildiruvchi ins bilan juft keladi. Ularning tahrir sanasi va sababi uchun atributlarini Ko'p tilli matn va tahrir izlari darsida ko'ramiz.

Farqni eslab qolish: narx o'zgardi — s, matn tuzatildi — del.

7. u — kam ishlatiladigan teg

u — matn ostiga chiziq tortadi. Uning ma'nosi — "bu matnda so'z bilan aytilmagan belgi bor". Eng ko'p uchraydigan to'g'ri holat — imlo xatosini belgilash:

<p>O'quvchi yozdi: "Men <u>bugn</u> kechikdim."</p>

Diqqat: Internetda tagiga chizilgan matnni odamlar havola deb o'ylaydi va bosib ko'radi. Shuning uchun u ni juda kam ishlating. Faqat "chiroyli ko'rinsin" deb hech qachon ishlatmang.

8. sub va sup — pastki va yuqori indeks

sub (subscript) — pastki indeks, sup (superscript) — yuqori indeks. Ular belgining ma'nosi uchun kerak bo'lgan joyda ishlatiladi:

<p>Suv formulasi: H<sub>2</sub>O</p>
<p>Zal maydoni: 120 m<sup>2</sup></p>
<p>Formula: x<sup>2</sup> + y<sup>2</sup></p>
<p>Osh narxi oshdi<sup>1</sup>.</p>

Brauzerda: "H₂O", "120 m²", "x² + y²" va "oshdi¹" — oxirgisi sahifa pastidagi izohga ishora.

sup ni reklama yozuvini tepaga chiqarish uchun ishlatmang. "2" raqami yuqorida turmasa, "m2" noto'g'ri o'qilsa — bu sup ning o'rni. Aks holda — CSS.

9. Qaysi tegni tanlash kerak? Algoritm

Matnni ajratib ko'rsatmoqchi bo'lsangiz, o'zingizga ketma-ket savol bering:

Oxirgi qatorga e'tibor bering. Agar hech bir ma'no mos kelmasa, sizga teg emas, CSS kerak.

Bo'sh joyni to'ldiring: eski narxni ustidan chizib ko'rsatish uchun qaysi teg?

Tekshirib ko'ring: Menyuda yangi taom nomi yonida "YANGI!" yozuvi bor. U ko'zga tashlanishi kerak. Qaysi tegni tanlaysiz?

10. Ko'p uchraydigan xatolar

Bu teglardagi xatolarni validator ko'rsatmaydi: b o'rniga strong yozsangiz ham, HTML "to'g'ri" bo'lib qoladi. Shuning uchun ularni o'zingiz tanishingiz kerak.

10.1 Hamma narsa qalin

<p><strong>Choyxonamiz</strong> <strong>har kuni</strong> ochiq,
<strong>osh</strong> va <strong>kabob</strong> bor!</p>

Hamma narsa muhim bo'lsa — hech narsa muhim emas. O'quvchi qaysi biriga qarashni bilmaydi. Tuzatish: paragrafda 1–2 ta eng muhim bo'lakni qoldiring.

10.2 Ogohlantirish uchun b

<p><b>Diqqat:</b> taomda yong'oq bor.</p>

Bu xavfsizlik uchun muhim ma'lumot, lekin b uni "shunchaki ajratilgan" deb belgilaydi. Tuzatish: <strong>Diqqat:</strong>.

10.3 Ikonka uchun i

Ko'p saytlarda shunday kodni uchratasiz:

<i class="fa-solid fa-phone"></i>

Bu — Font Awesome degan ikonka kutubxonasining eski odati. Bo'sh i ekranda telefon rasmini chiqaradi. Ishlaydi, lekin i ning ma'nosi buzilgan: ichida matn yo'q, u "boshqa ohangdagi matn" emas. Ikonkalarning to'g'ri usulini SVG va ikonkalar darsida ko'ramiz. Hozircha: bunday kodni ko'rsangiz, hayron bo'lmang, lekin o'zingiz takrorlamang.

10.4 s va del ni chalkashtirish

Chegirma narxini del bilan yozish — keng tarqalgan xato. del "hujjatdan o'chirildi" degani, narx esa o'chirilmagan, u faqat eskirgan. Tuzatish: narxlar uchun s.

11. Mashqlar

1-mashq (oson): Teglarni moslang

Har bir matn uchun to'g'ri tegni tanlang:

1. "Yong'oqqa allergiyasi borlar uchun xavfli!" →
2. Kimyoviy formula CO₂ dagi "2" →
3. Eski narx "45 000 so'm" (endi 40 000) →
4. Matndagi fransuzcha "croissant" so'zi →

2-mashq (o'rta): Aksiya e'lonini qayta yozing

Bu kodda teglar ko'rinishga qarab tanlangan. Ma'noga qarab qayta yozing:

<p><b>DIQQAT!</b> Faqat bugun osh <b>40 000</b>
emas, <u>35 000</u> so'm!</p>
<p><i>Aksiya shartlari: bitta mijozga bitta porsiya.</i></p>

<p><strong>Diqqat!</strong> Faqat bugun osh
<s>40 000</s> 35 000 so'm!</p>
<p><small>Aksiya shartlari: bitta mijozga bitta porsiya.</small></p>

3-mashq (qiyin): Menyu qidiruvi natijasi

"Kabob" so'zi qidirildi. Natijalar sahifasining body qismini yozing:

1. h1: "Qidiruv: kabob".
2. Uchta natija, har birida taom nomida "kabob" so'zi mark bilan belgilangan: "Qiyma kabob — 25 000", "Jigar kabob — 22 000", "Tovuq kabob — eski narx 20 000, yangi 18 000".
3. Pastda mayda izoh: narxlar so'mda.
4. Emmet'dan foydalanishingiz mumkin.

<h1>Qidiruv: kabob</h1>
<p>Qiyma <mark>kabob</mark> — 25 000 so'm</p>
<p>Jigar <mark>kabob</mark> — 22 000 so'm</p>
<p>Tovuq <mark>kabob</mark> — <s>20 000</s> 18 000 so'm</p>
<p><small>Barcha narxlar so'mda ko'rsatilgan.</small></p>

12. Real ishda

• Qidiruv natijalari. Google, YouTube va onlayn do'konlar qidirilgan so'zni natijada ajratib ko'rsatadi. Buni JavaScript mark tegi bilan qiladi.
• Onlayn do'konlar. Chegirmadagi mahsulot kartasida s bilan eski narx — standart naqsh.
• Kontent muharrirlari. WordPress yoki Telegraph'dagi "B" va "I" tugmalari aslida strong va em yozadi. Muharrirlar ham ma'noni ko'rinishdan ajratishga harakat qiladi.
• Accessibility auditi. Auditorlar "hamma narsa qalin" sahifani va ma'nosiz strong larni kamchilik deb yozadi.

Xulosa

• strong — muhimlik, b — muhimliksiz ajratish; shubha bo'lsa strong.
• em — ma'noni o'zgartiradigan urg'u, i — boshqa ohang: chet so'z, atama, fikr.
• mark — kontekstga mos joy (qidiruv natijasi), small — mayda izoh.
• s — eskirgan ma'lumot (eski narx), del — tahrirda o'chirilgan matn.
• u — kam ishlatiladi, havolaga o'xshab chalkashtiradi; sub/sup — indekslar.
• Hech bir ma'no mos kelmasa — teg emas, CSS kerak.

Keyingi dars: Iqtibos, qisqartma, vaqt va ma'lumot — iqtiboslar, qisqartmalar, sanalar va narxlarni mashina ham tushunadigan qilish.

Manbalar

• MDN: <strong>, <b>, <em>, <i>, <mark>, <small>, <s>, <del>, <u>, <sub>, <sup> — developer.mozilla.org
• WHATWG HTML: "Text-level semantics" — html.spec.whatwg.org