2.3-dars — Matnni ajratib ko'rsatish: strong, em

Darsda 5 ta bo'lim bor. Ularni tartib bilan o'rganing.

<strong> tegi — juft teg. U brauzerga: «ichidagi kontent yuqori darajada muhim» deydi. Brauzer bunday matnni qalin qilib ko'rsatadi, lekin ma'nosi tashqi ko'rinishdan chuqurroq. Bir e'lonni tasavvur qiling: «Diqqat! Topshirish muddati — juma!». «Diqqat» so'zi juda muhim. Aynan shu yerda <strong> kerak bo'ladi — u ma'noviy yuk qo'shadi.

Ekranni o'quvchi dasturlar (skrinriderlar) <strong> ichidagi matnni boshqacha ohangda — balandroq va qat'iyroq ovoz bilan o'qiydi. Qidiruv tizimlari ham <strong> ichidagi matnga e'tibor beradi — ular bu matn qolganidan muhimroq ekanligini tushunishadi. <strong> qachon ishlatiladi? Ogohlantirishlar uchun («Ehtiyot bo'ling!», «Diqqat!»), asosiy atamalar, o'ta muhim ko'rsatmalar, e'tibor qaratish kerak bo'lgan sanalar va muddatlar uchun, ovozingizda bosim bilan aytadigan istalgan so'zlar uchun.

Asosiy qoida: agar so'zni ma'nosini yo'qotmasdan olib tashlash mumkin bo'lsa — uni <strong> ichiga o'rab qo'ymang. Tegdan faqat haqiqatan ham muhimlikni ta'kidlamoqchi bo'lganingizda foydalaning. Butun abzatslarni ajratmang — agar hammasi «muhim» bo'lsa, demak hech narsa muhim emas.

<p><strong>Diqqat!</strong> Arizalarni topshirish muddati 3 kundan keyin tugaydi.</p>
<p><strong>Faqat</strong> sifatli materiallardan foydalaning.</p>
<p>Bu bo'lim to'ldirish uchun <strong>majburiy</strong>.</p>
<p>Loyihani topshirish sanasi: <strong>2026-yil 15-iyul</strong>.</p>
<p>Parol <strong>kamida 8 ta belgidan</strong> iborat bo'lishi kerak.</p>

E'tibor bering: turli misollarda gapning turli qismlari ajratilgan. Birinchisida — butun ogohlantiruvchi so'z. Ikkinchisida — yagona to'g'ri variantni ko'rsatuvchi «Faqat» so'zi. Uchinchisida — zaruriyatni ta'kidlovchi «majburiy» so'zi. Har bir holatda <strong> o'z ma'noviy yukini olib yuradi.

<strong>ni boshqa teglar ichida ishlatish mumkinmi? Ha. Uni <p> abzatsi, <h1>–<h6> sarlavhasi, <li> ro'yxat elementi, <a> havolasi ichiga — istalgan joyga qo'yishingiz mumkin. <strong>ni bir necha marta o'z ichiga solmang — bu samarani kuchaytirmaydi. Agar butun iborani ajratish kerak bo'lsa, uni har bir so'zni alohida emas, balki to'liq bitta tegga o'rab qo'ying.

<em> tegi (emphasis — «urg'u» so'zidan) — juft teg. U matnni mantiqiy urg'u bilan aytish kerakligini ko'rsatadi. Brauzerda kursiv shaklida ko'rinadi. Lekin, strong kabi, uning ma'nosi vizual o'zgarishdan chuqurroq.

«Men bugun buni qilish kerak dedim» iborasini «kerak» so'ziga urg'u berib ayting. Endi esa — «dedim» so'ziga urg'u berib ayting. Ma'no o'zgaradi! Birinchi holatda siz shoshilinchlikka urg'u berayapsiz. Ikkinchisida — allaqachon aytganingizni ta'kidlayapsiz. Aynan shunday nozik farqlar uchun <em> kerak.

<em> qachon ishlatiladi? Ovoz chiqarib o'qiganingizda intonatsion urg'u bergan holatlaringizda. Masalan: «Sizni ko'rganimdan juda xursandman» (his-tuyg'uni kuchaytirish), «Bu yagona yo'l» (yagonalik), «U hech kimni xafa qilmoqchi emas edi» (rad etish). O'zbek tilida <em> ko'pincha qarama-qarshilikni ifodalash uchun ishlatiladi: «Menga sen emas, men senga qarzdorman».

strong'dan muhim farqi: strong — bu balandlik va qat'iylik (undov belgisi kabi), em esa — intonatsiya va nozik ma'no (o'zgargan ovoz ohangi kabi). Strong «e'tibor bering, bu muhim» deydi, em esa — «buni ma'lum bir intonatsiya bilan ayting» deydi.

<p>Sizni ko'rganimdan <em>juda</em> xursandman! — his-tuyg'uni kuchaytirish.</p>
<p>Bu muammoni yechishning <em>yagona</em> yo'li. — yagonalik.</p>
<p>U hech kimni <em>xafa</em> qilmoqchi emas edi. — rad etish.</p>
<p>Buni <em>o'zing</em> hal qilding, men majburlamadim. — sub'ektni ajratish.</p>
<p>Men <em>senga</em> aytgan edim-ku! — norozilik / eslatish.</p>

Oxirgi misol: «Men senga aytgan edim-ku!». Bu yerdagi ajratish shunchaki chiroy uchun emas — u norozilik yoki hayrat hissiy yukini olib yuradi. <em> aynan shu his-tuyg'uni yetkazadi. Ajratishsiz gap oddiy dalil bayoni kabi jaranglagan bo'lardi.

<em>ni <strong> ichiga yoki aksincha joylashtirish mumkinmi? Ha. Masalan: <strong>Muhim: <em>hech qachon</em> buni qilmang!</strong>. Bu yerda strong ogohlantirishning umumiy muhimligini ta'kidlaydi, em esa «hech qachon» so'ziga intonatsion urg'u qo'shadi. Bunday kombinatsiya samarani kuchaytiradi. Lekin suiiste'mol qilmang — hammasini ajratsangiz, hech narsa ajratilmagan bo'lib qoladi.

Ma'noviy yuksiz oddiygina matnni kursiv qilish kerak bo'lsa-chi? Masalan, chet tilidagi so'zni (de facto) yoki kema nomini (RMS Titanic) ajratish uchun? Bunday holatlar uchun <i> tegi bor. em va i o'rtasidagi farq haqida keyingi bo'limda gaplashamiz. Eng muhimini eslab qoling: <em> — bu ma'no, tashqi ko'rinish emas.

HTML'ni endigina o'rganayotganingizda, qalin matn uchun ikkita teg (strong va b) va kursiv uchun ikkita teg (em va i) borligi sizni chalg'itishi mumkin. Nega? Hammasi juda oddiy: <strong> va <em> — bu semantik teglar. Ular ma'noviy yuk olib yuradi. <b> va <i> — bu prezentatsion teglar. Ular faqat tashqi ko'rinish uchun javob beradi.

«Semantika» so'zi murakkab jaranglaydi, lekin aslida shunchaki «ma'no» degani. Semantik teg nafaqat brauzerga, balki boshqa dasturlarga ham (qidiruv tizimlariga, skrinriderlarga) shuni aytadi: «mana bu muhim», «mana bu urg'u bilan». Prezentatsion teglar esa shunchaki: «buni qalin qil», «buni kursiv qil» — deydi, xolos.

<!-- Semantik razmetka (to'g'ri) -->
<p><strong>Diqqat!</strong> Ishni boshlashdan oldin <strong>albatta</strong>
elektr ta'minotini o'chiring. <em>Hech qanday holatda</em> yalang'och simlarga tegmang.</p>

<!-- Prezentatsion razmetka (kamroq to'g'ri) -->
<p><b>Diqqat!</b> Ishni boshlashdan oldin <b>albatta</b>
elektr ta'minotini o'chiring. <i>Hech qanday holatda</i> yalang'och simlarga tegmang.</p>

Vizual jihatdan ikkala versiya ham bir xil ko'rinadi — qalin va kursiv matn. Lekin skrinrider uchun farq juda katta. Birinchi variantda skrinrider «Diqqat»ni balandroq ovoz bilan, «Hech qanday holatda»ni esa o'zgargan ohang bilan o'qiydi. Ikkinchisida u matnni his-tuyg'usiz, bir xil tekislikda o'qiydi. Ko'zi ojiz foydalanuvchi uchun bu juda muhim.

Qanday tanlash kerak? O'zingizdan so'rang: «Men matnni ma'nosi muhim bo'lgani uchun ajratayapmanmi yoki uni qalin/kursiv ko'rinishda ko'rsatmoqchi bo'lganim uchunmi?» Agar ma'no bo'yicha bo'lsa — strong/em. Agar faqat tashqi ko'rinish bo'lsa — b/i yoki CSS. Zamonaviy veb-dasturlashda ustuvorlik: semantik teglar → prezentatsion teglar → CSS.

Siz allaqachon strong va em semantik teglar ekanligini bilasiz. Lekin nega bu shunchalik muhim? Nega shunchaki b va i'ni ishlatib bo'lmaydi? Vizual natija bir xil-ku. Keling, barcha sabablarni ko'rib chiqamiz.

1. Qulaylik (a11y). Millionlab odamlar skrinriderlardan — ekranni ovoz chiqarib o'qib beruvchi dasturlardan foydalanadi. Skrinrider strong yoki em'ga duch kelganda, ovoz intonatsiyasini o'zgartiradi: strong balandroq va qat'iyroq o'qiladi, em — boshqa ohangda. b va i'ni esa skrinriderlar e'tiborsiz qoldiradi. Xavfsizlik bo'yicha ko'rsatma o'qiyotganingizni tasavvur qiling, lekin skrinrider ogohlantirishlarni ovoz bilan ajratib bermaydi. Bu xavfli bo'lishi mumkin.

2. SEO (qidiruv tizimlarini optimallashtirish). Google va Yandex kabi qidiruv tizimlari sahifaning semantik tuzilishini tahlil qiladi. strong va em ichidagi matn reytingda ko'proq vazn oladi. Bu degani, strong ichiga o'ralgan muhim kalit so'zlarni qidiruv tizimi ko'proq relevant deb hisoblaydi. b va i esa SEO'ga ta'sir qilmaydi.

3. Semantik razmetka. HTML5 boshidanoq semantik til sifatida loyihalashtirilgan. Teglarni maqsadiga muvofiq ishlatish — professional standart. Boshqa dasturchi kodingizni o'qiganda, qaysi matn muhim va qaysi biri shunchaki vizual ajratilganini darhol tushunadi. Bu loyihani qo'llab-quvvatlashni osonlashtiradi. Semantik kod o'zini o'zi hujjatlashtiradi.

4. Kelajakdagi moslik. HTML standartlari rivojlanib bormoqda. Prezentatsion teglar (b, i) semantik muqobili bo'lsa, ularni ishlatish tavsiya etilmaydi degan ma'noda eskirgan hisoblanadi. Semantik teglar esa, aksincha, saqlanib qoladi va pozitsiyasini faqat mustahkamlaydi. Bugun strong/em ishlatib, siz 10 yildan keyin ham dolzarb bo'ladigan kod yozayapsiz.

5. Universallik. Semantik teglar aniq bir vizual ko'rinishga bog'lanmagan. Bugun brauzerlar strong'ni qalin, em'ni esa kursiv qilib ko'rsatadi. Lekin yangi qurilmalar paydo bo'lishi bilan (kengaytirilgan reallik ko'zoynaklari, ovozli assistentlar) ko'rsatish usuli o'zgarishi mumkin. Semantik razmetka istalgan qurilma uchun tushunarli bo'lib qoladi, prezentatsion esa ma'nosini yo'qotadi.

<!-- Prezentatsion yondashuv (kamroq to'g'ri) -->
<p><b>Chegirma!</b> Barcha mebelga <i>50%</i>gacha chegirma.
<b>Shoshiling!</b> Mahsulot soni <i>cheklangan</i>.</p>

<!-- Semantik yondashuv (to'g'ri) -->
<p><strong>Chegirma!</strong> Barcha mebelga 50%gacha chegirma.
<strong>Shoshiling!</strong> Mahsulot soni cheklangan.</p>

Semantik versiyada biz «Chegirma!» va «Shoshiling!» uchun strong ishlatdik, chunki bular muhim harakatga chaqiruvlar. Foizlar va «cheklangan» so'zi — shunchaki ma'lumot, ma'noviy ajratishni talab qilmaydi. Prezentatsion versiyada esa muallif ma'noni hisobga olmasdan, shunchaki o'ziga vizual jihatdan kerak ko'ringan narsani qalin va kursiv qilib qo'ygan.

Yana bir muhim jihat: strong va em'ni birlashtirish mumkin. Agar urg'u bilan alohida muhimlikni ta'kidlash kerak bo'lsa, bir tegni ikkinchisiga joylashtiring. Lekin bir darajadan ortiq joylashtirmang — bu ortiqcha bo'ladi.

<p><strong><em>Hech qachon</em></strong> parolni boshqalarga bermang.</p>
<p><strong>Ogohlantirish: <em>barcha</em> maydonlar majburiy.</strong></p>

Bu kod skrinrider tomonidan shunday o'qiladi: «[baland va qat'iy] [intonatsiya bilan] Hech qachon [oddiy ovozda] parolni boshqalarga bermang». Bu maksimal darajada samarali.

Endi, nazariyani tushunib olganingizdan so'ng, bilimni amaliyotda qo'llash vaqti keldi. Vazifangiz — matn abzatsini faqat <strong> va <em> yordamida bezashdir. Boshqa hech qanday formatlash tegi kerak emas. Faqat shu darsda o'rgangan teglar bilan ishlaymiz.

Tasavvur qiling, yangi xodim uchun ko'rsatma yozayapsiz. Matn allaqachon tayyor, lekin u umuman bezalmagan — «matn devori». Vazifa: matnni o'qish, qaysi so'zlar ajratishni talab qilishini tushunish va strong hamda em'ni joylashtirish.

Boshlang'ich matn (formatlanmagan):

Diqqat! Bu juda muhim. Ish kuni soat 9:00 da boshlanadi.
Kechikish mumkin emas. Agar kechiksangiz, albatta
rahbaringizni ogohlantiring. Tushlik tanaffusi — 13:00 dan 14:00 gacha.
Ish vaqtida mobil telefondan foydalanish faqat
istisno holatlarda, shaxsiy maqsadlarda mumkin.
Kompyuter parolini har oy almashtirish kerak.
Parolingizni hech kimga aytmang!

Endi esa — razmetka bilan sizning versiyangiz:

<p><strong>Diqqat!</strong> Bu <strong>juda muhim</strong>.
Ish kuni <strong>soat 9:00 da</strong> boshlanadi.
<strong>Kechikish mumkin emas</strong>. Agar kechiksangiz,
<strong>albatta</strong> rahbaringizni ogohlantiring.
Tushlik tanaffusi — 13:00 dan 14:00 gacha.
Ish vaqtida mobil telefondan foydalanish
<em>faqat</em> shaxsiy maqsadlarda <em>istisno holatlarda</em> mumkin.
Kompyuter parolini <strong>har oy</strong> almashtirish kerak.
<strong><em>Hech kimga</em></strong> parolingizni aytmang!</p>

Mantiq: «Diqqat!» — strong (ogohlantirish), «juda muhim» — strong (jiddiylik), «soat 9:00 da» — strong (aniq vaqt), «Kechikish mumkin emas» — strong (qoida), «albatta» — strong (zaruriyat), «faqat» — em (intonatsiya), «istisno holatlarda» — em (kamdanlik), «har oy» — strong (interval), «Hech kimga» — strong+em (kuchaytirish).

Endi navbat sizga keldi! Mustaqil ish uchun topshiriq mana:

<!-- Bu matnda strong va em'ni joylashtiring -->
<p>Muhim! Loyihani topshirish muddati — juma.
Yuborishdan oldin barcha fayllarni tekshirishni unutmang.
Rahbar ishingizni albatta tekshiradi,
shuning uchun topshiriqqa jiddiy yondashing.
Oxirgi lahzaga qoldirmang!</p>

Bu yerda qaysi so'zlar eng muhimligini (strong) va qaysilariga intonatsion urg'u berish kerakligini (em) o'ylab ko'ring.

<p><strong>Muhim!</strong> Loyihani topshirish muddati — <strong>juma</strong>.
<strong>Unutmang</strong>, yuborishdan oldin <em>barcha</em> fayllarni tekshiring.
Rahbar ishingizni <strong>albatta</strong> tekshiradi,
shuning uchun topshiriqqa <em>jiddiy</em> yondashing.
<strong>Oxirgi lahzaga qoldirmang!</strong></p>

Sizning variantingiz farq qilishi mumkin — va bu normal! Turli odamlar ma'noviy urg'ularni turlicha joylashtiradi. Eng muhimi, strong (muhimlik) va em (intonatsiya) o'rtasida ongli ravishda tanlov qilishingiz.

Istalgan misolni HTML fayliga nusxalab, brauzerda oching va strong hamda em real sahifada qanday ko'rinishini kuzating. Razmetka bilan eksperiment qiling va matn qabul qilinishi qanday o'zgarishini kuzating.

Tabriklayman! Siz 2.3-darsni yakunladingiz. Endi siz matnni ajratish uchun strong va em'ni ongli ravishda ishlata olasiz.