IlmHamroh
JavaScript Full-stack/4-qism. HTML15/86-dars10 daqiqa
Mundarija (28)

HTML'da ko'p tilli matn: lang, dir, bdi, translate, ins va del

Qisqacha: Sahifaning bir qismi boshqa tilda bo'lsa, unga alohida lang beriladi — shunda ekran o'quvchi va tarjimon uni to'g'ri o'qiydi. Arab kabi o'ngdan chapga yoziladigan matn dir="rtl" bilan belgilanadi, noma'lum yo'nalishdagi ism esa bdi ichiga olinadi. translate="no" tarjimonga "buni tarjima qilma" deydi. ins va del esa matnga nima qo'shilgani va nima o'chirilganini ko'rsatadi.

Bu darsda

  • Sahifa ichidagi iqtibos yoki iboraga alohida lang berasiz.
  • dir="rtl", dir="auto" va bdi bilan arabcha matnni to'g'ri ko'rsatasiz.
  • translate="no" bilan brend nomini avtomatik tarjimadan himoya qilasiz.
  • ins va del bilan tahrir tarixini sana va sababi bilan belgilaysiz.
  • ruby nima uchun kerakligini bilasiz.

Oldin bilishingiz kerak: Iqtibos, qisqartma, vaqt va ma'lumot, Hujjat skeleti.

1. Nega bu kerak?

Toshkentdagi choyxonaga turli mehmonlar keladi: rusiyzabon qo'shnilar, arab sayyohlari, koreyalik talabalar. Choyxona sayti ham shunga moslashadi: menyuda ruscha nomlar, arabcha "xush kelibsiz", mijozlarning turli tillardagi sharhlari.

Hujjat skeleti darsida butun sahifaga lang="uz" qo'ydik. Endi sahifada boshqa tildagi bo'laklar ham bor. Ularni belgilamasak:

  • Ekran o'quvchi ruscha iborani o'zbekcha talaffuz bilan buzib o'qiydi.
  • Brauzer tarjimoni "Bahor" nomini "Spring" deb tarjima qilib qo'yadi.
  • Arabcha matn aralash gapda teskari tartibda chiqadi.

Bu dars — shu muammolarning HTML'dagi yechimlari.

2. Qism uchun lang

lang — global atribut: uni istalgan elementga berish mumkin. Butun sahifa o'zbekcha bo'lsa ham, bitta paragraf yoki so'zni boshqa tilda belgilaysiz:

html
<p>Mehmonlarimiz ko'pincha
<span lang="ru">Приятного аппетита!</span> deb xayrlashadi.</p>

<blockquote lang="en">
  <p>Best plov in Tashkent!</p>
</blockquote>

Ichki lang tashqisidan ustun turadi. span ichida — rus tili, qolgan paragrafda — sahifaning o'zbek tili. blockquote va uning ichidagi hamma narsa — ingliz tili.

lang nimalarga ta'sir qiladi:

  • Ekran o'quvchi tegishli tilning ovozi va talaffuziga o'tadi.
  • Imlo tekshiruvi (masalan, forma maydonlarida) to'g'ri lug'atni ishlatadi.
  • Bo'g'in ko'chirish (CSS hyphens) shu tilning qoidalariga amal qiladi.
  • Qidiruv tizimlari sahifa qaysi tillardagi kontentni o'z ichiga olganini biladi.

Bo'sh joyni to'ldiring: ingliz tilidagi iqtibos uchun lang qiymati —

Tekshirib ko'ring: Sahifa lang="uz". Unda bitta paragraf lang="ru", uning ichidagi strong da esa hech qanday lang yo'q. strong qaysi tilda?

Javob

Rus tilida. lang meros bo'lib o'tadi: element o'zining lang i bo'lmasa, eng yaqin otasining tilini oladi. strong ning otasi — lang="ru" paragraf.

3. Matn yo'nalishi: dir

3.1 O'ngdan chapga yoziladigan tillar

O'zbek, rus, ingliz — chapdan o'ngga yoziladi. Arab, fors, ibroniy tillari esa o'ngdan chapga. Bu inglizcha qisqa qilib RTL (right-to-left) deyiladi, bizning yo'nalish esa LTR (left-to-right).

Yo'nalish dir atributi bilan belgilanadi:

html
<p lang="ar" dir="rtl">مرحبا بكم</p>

"Xush kelibsiz" arabchada. dir="rtl" bilan brauzer matnni o'ng chetga taqaydi va to'g'ri yo'nalishda chiqaradi.

dir ning uch qiymati:

Qiymat Ma'nosi
ltr Chapdan o'ngga (standart)
rtl O'ngdan chapga
auto Brauzer matnning birinchi kuchli harfiga qarab o'zi aniqlaydi

Butun sayt arabcha bo'lsa, dir="rtl" ni html tegiga qo'yasiz: <html lang="ar" dir="rtl">. Shunda butun sahifa — menyular, ustunlar — ko'zguda aks etgandek o'ngdan boshlanadi.

3.2 dir="auto" — noma'lum tildagi matn

Foydalanuvchi o'zi yozgan matnni oldindan bilmaysiz. Sharhni kimdir o'zbekcha, kimdir arabcha yozishi mumkin. Bunday joylarda dir="auto":

html
<p dir="auto">Osh juda mazali edi!</p>
<p dir="auto">كان الطعام لذيذا جدا</p>

Brauzer har bir paragrafning birinchi harfiga qaraydi va yo'nalishni o'zi tanlaydi.

4. bdi va bdo — aralash yo'nalish

4.1 Muammo

Gap ichida o'zbekcha matn va arabcha ism aralashsa, g'alati hodisa yuz beradi. Masalan, sharhlar ro'yxati:

html
<p>Muallif: إيمان: 3 ta sharh</p>

Brauzer arabcha ismdan keyingi ":" va "3" ni ham arabcha matnning davomi deb o'ylashi mumkin. Natijada raqam va belgilar noto'g'ri tartibda — ismning "narigi" tomonida chiqadi. Bu brauzerning ikki yo'nalishli matn algoritmi qoidalaridan kelib chiqadi.

4.2 bdi — izolyatsiya

bdi (bidirectional isolation — ikki yo'nalishli izolyatsiya) ichidagi matnni atrofdagidan "ajratib" qo'yadi:

html
<p>Muallif: <bdi>إيمان</bdi>: 3 ta sharh</p>

Endi arabcha ism o'z yo'nalishida ko'rinadi, lekin ":" va "3 ta sharh" o'zbekcha gap tartibida qoladi.

Qoida: foydalanuvchi ismlari, nikneymlar, mahsulot nomlari kabi tashqaridan kelgan matnni gap ichiga qo'yayotganda bdi ishlating. Ular qaysi tilda bo'lishini oldindan bilmaysiz.

4.3 bdo — majburiy yo'nalish

bdo (bidirectional override) — yo'nalishni majburan o'zgartiradi. U albatta dir bilan ishlatiladi:

html
<p><bdo dir="rtl">Bahor</bdo></p>

Brauzerda: "rohaB" — harflar teskari tartibda. Real sahifalarda bdo juda kam kerak bo'ladi — asosan ikki yo'nalishli matn bilan ishlaydigan mutaxassislar uchun. Uning mavjudligini bilish kifoya.

5. translate="no" — tarjima qilinmasin

Chrome yoki Yandex brauzerida "Sahifani tarjima qilish" tugmasi bor. U sahifadagi hamma matnni tarjima qiladi — hatto keraksiz joylarni ham:

  • Choyxona nomi «Bahor» → «Spring» (inglizchaga).
  • Kod parchasi console.log → tarjima qilinib buziladi.
  • Brend nomlari: IlmHamroh, Click, Payme.

translate="no" tarjimonga aytadi: "buni tegma":

html
<h1>Choyxona <span translate="no">«Bahor»</span></h1>
<p>Kodni <code translate="no">console.log</code> bilan tekshiring.</p>

Endi sahifa ingliz tiliga tarjima qilinsa, "Choyxona" "Teahouse" bo'ladi, lekin «Bahor» o'zgarmaydi.

Maslahat: translate="no" ni butun sahifaga emas, faqat tarjima qilinmasligi kerak bo'lgan bo'laklarga qo'ying. Sahifaning qolgan qismini chet ellik mehmon o'z tilida o'qiy olishi — katta qulaylik.

Tekshirib ko'ring: Sahifada "Buyurtma uchun Telegram botimiz: @sizning_bot" yozuvi bor. Qaysi qismiga translate="no" qo'yasiz?

Javob

@sizning_bot ga. Bu bot nomi — tarjima qilinsa, foydalanuvchi uni Telegram'da topa olmaydi. "Buyurtma uchun Telegram botimiz" esa tarjima qilinishi foydali.

6. ins va del — tahrir izlari

6.1 Nima qo'shildi, nima o'chirildi

Urg'u teglari darsida del bilan tanishgan edik: "hujjatdan o'chirilgan matn". Uning jufti — ins (insert): "hujjatga qo'shilgan matn".

Ular birgalikda hujjatning tahrir tarixini ko'rsatadi:

html
<p>Choy kechasi
<del>shanba</del> <ins>yakshanba</ins> kuni bo'ladi.</p>

Brauzer del ni ustidan chizib, ins ni tagiga chizib ko'rsatadi. O'quvchi darhol ko'radi: kun o'zgargan.

6.2 datetime va cite

Ikkala teg ham ikki foydali atributga ega:

  • datetime — o'zgarish qachon qilingan. Format — time elementidagi kabi.
  • cite — o'zgarish sababi yozilgan sahifa manzili (masalan, e'lon).
html
<p>Choy kechasi
<del datetime="2026-09-20">shanba</del>
<ins datetime="2026-09-27"
     cite="elonlar.html#kun-ozgardi">yakshanba</ins>
kuni bo'ladi.</p>

Brauzer bu atributlarni ekranda ko'rsatmaydi. Ular — tarix saqlanadigan hujjatlar (shartnomalar, qoidalar, yangiliklar) uchun aniq yozuv.

6.3 Butun blokni qo'shish

ins va del bitta so'zni ham, butun paragrafni ham o'rashi mumkin:

html
<ins datetime="2026-09-27">
  <p>Yangi: har chorshanba bolalar uchun chegirma.</p>
</ins>

Yangiliklar saytlarida "Yangilandi" deb qo'shilgan paragraflar ko'pincha shunday belgilanadi.

7. ruby — talaffuz izohi

Xitoy va yapon tillarida bir ieroglif bir necha xil o'qilishi mumkin. Bolalar kitoblari va o'quv materiallarida ieroglif ustiga kichik harflar bilan o'qilishi yoziladi. Bu ruby annotatsiya deyiladi.

HTML'da uning uchun ruby, rt va rp teglari bor:

html
<ruby>
  漢<rp>(</rp><rt>kan</rt><rp>)</rp>
  字<rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>
  • ruby — butun blok.
  • rt (ruby text) — izoh, ya'ni o'qilishi. U asosiy belgi ustida kichik harflarda chiqadi.
  • rp (ruby parenthesis) — qavslar. ruby ni tushunmaydigan eski brauzerlarda izoh qavs ichida chiqadi: "漢(kan)字(ji)". Zamonaviy brauzerlar rp ni yashiradi.

O'zbek saytlarida ruby kam kerak bo'ladi. Lekin, masalan, yapon yoki xitoy tili kursi yoki til o'rganish ilovasi yasasangiz, u aynan siz qidiradigan teg.

8. Ko'p uchraydigan xatolar

Bu teglardagi xatolarni validator deyarli ko'rsatmaydi — lang="uz" o'rniga lang="uzb" yozsangiz ham u jim turishi mumkin. Shuning uchun ularni o'zingiz tanishingiz kerak.

8.1 Chet tildagi iboraga lang yo'q

Sahifada ruscha yoki inglizcha iqtibos bor, lekin lang yo'q. Ekranda farq sezilmaydi, lekin ekran o'quvchi uni o'zbekcha talaffuz bilan o'qiydi va tushunarsiz qiladi. Tuzatish: har bir chet tildagi bo'lakka lang.

8.2 Noto'g'ri til kodi

lang="uzb", lang="english", lang="Uz" kabi qiymatlar. Til kodlari xalqaro standartga amal qiladi: ikki harfli kodlar (uz, ru, en, ar), kerak bo'lsa yozuv yoki mintaqa bilan (uz-Cyrl, en-GB). Tuzatish: kodni tekshiring. Katta-kichik harf farq qilmaydi, lekin odatiy yozuv — til kichik harfda, yozuv bosh harf bilan: uz-Latn.

8.3 Faqat dir — lang siz

html
<p dir="rtl">مرحبا بكم</p>

Yo'nalish to'g'ri, lekin til noma'lum — ekran o'quvchi arabchani o'qiy olmaydi. Tuzatish: ikkalasini ham qo'ying: lang="ar" dir="rtl".

8.4 Ko'rinish uchun ins va del

Tagi chizilgan matn uchun ins, ustidan chizilgan eski narx uchun del — noto'g'ri. ins/del — faqat hujjat tahriri uchun. Eski narx — s, tag chizig'i kerak bo'lsa — CSS.

9. Mashqlar

1-mashq (oson): Atributni tanlang

  1. Ruscha iboraga qaysi atribut?
  2. Arabcha paragrafning yo'nalishi uchun qaysi atribut?
  3. Brend nomi tarjima qilinmasligi uchun translate atributining qiymati:
Yechim
  1. lang="ru" — til.
  2. dir="rtl" — o'ngdan chapga yo'nalish (lang="ar" bilan birga).
  3. translate="no" — tarjimon bu matnga tegmaydi.

2-mashq (o'rta): Sharhlar bloki

Uchta sharhni HTML'da yozing. Har bir sharhda muallif ismi va matn. Birinchisi o'zbekcha (Jasur), ikkinchisi inglizcha (Emma: "Amazing plov!"), uchinchisi arabcha (ism: كريم, matn: شاي لذيذ). Muallif ismlari gap ichida bdi da, har bir chet tildagi matnning lang i va kerak bo'lsa dir i to'g'ri bo'lsin.

Yechim
html
<h2>Mehmonlar sharhlari</h2>

<p><bdi>Jasur</bdi>: Oshingiz a'lo!</p>
<p><bdi>Emma</bdi>: <span lang="en">Amazing plov!</span></p>
<p><bdi lang="ar">كريم</bdi>:
<span lang="ar" dir="rtl">شاي لذيذ</span></p>

Ismlar tashqaridan keladigan matn — bdi ularning yo'nalishini izolyatsiya qiladi. Inglizcha matn — faqat lang (yo'nalishi bizniki bilan bir xil). Arabcha — lang va dir. Real saytda sharh tili oldindan noma'lum bo'lgani uchun dir="auto" ham yaxshi tanlov.

3-mashq (qiyin): E'lon va uning tahriri

choyxona/tadbirlar.html ga "Choy kechasi" e'lonini qo'shing:

  1. Sana o'zgardi: 12-oktabr o'chirildi, 19-oktabr qo'shildi. Ikkalasiga ham datetime (tahrir sanasi) qo'ying, o'zgargan sanalarni esa time bilan belgilang.
  2. Choyxona nomi translate="no".
  3. Yangi qo'shilgan paragraf: "Kirish bepul" — butun paragraf ins ichida.
  4. npx html-validate bilan tekshiring.
Yechim
html
<h2>Choy kechasi — <span translate="no">«Bahor»</span></h2>
<p>Sana:
<del datetime="2026-09-27">
  <time datetime="2026-10-12">12-oktabr</time></del>
<ins datetime="2026-09-27">
  <time datetime="2026-10-19">19-oktabr</time></ins>,
soat 19:00.</p>
<ins datetime="2026-09-27">
  <p>Kirish bepul.</p>
</ins>

del va ins dagi datetime — tahrir qachon qilingani. Ichidagi time esa tadbirning o'zi qachon bo'lishi. Ikki xil sana, ikki xil vazifa.

10. Real ishda

  • Ko'p tilli saytlar. O'zbekistondagi ko'p saytlar uch tilda ishlaydi: o'zbek, rus, ingliz. Har bir til versiyasida html lang to'g'ri bo'lishi va til almashtirish tugmalari to'g'ri belgilanishi kerak. Til versiyalarini qidiruv tizimlariga ko'rsatish usulini Qidiruv tizimlari uchun meta teglar darsida ko'ramiz.
  • Foydalanuvchi kontenti. Telegram, izohlar, sharhlar — hammasi dir="auto" va bdi dan foydalanadi, chunki foydalanuvchi qaysi tilda yozishini bilib bo'lmaydi.
  • Kod va brendlar. Texnik hujjat saytlari (MDN, GitHub) kod bloklariga translate="no" qo'yadi — aks holda brauzer tarjimoni kodni buzadi.
  • Huquqiy hujjatlar. Foydalanish shartlari, maxfiylik siyosati kabi sahifalarda ins/del bilan o'zgarishlar tarixini ko'rsatish shaffoflik belgisi.

Xulosa

  • lang istalgan elementga beriladi va meros bo'lib o'tadi; chet tildagi har bir bo'lakka o'z lang i.
  • dir: ltr, rtl, auto; arabcha matnga lang="ar" dir="rtl".
  • bdi — noma'lum yo'nalishdagi ism va matnni izolyatsiya qiladi; bdo — yo'nalishni majburlaydi (kam kerak).
  • translate="no" — brend nomlari, bot nomlari va kodni avtomatik tarjimadan himoya qiladi.
  • ins/del — hujjat tahriri; datetime — qachon, cite — nega.
  • ruby, rt, rp — ierogliflar ustidagi talaffuz izohi.

Keyingi dars: Havola asoslari: a va href — vebning asosi: sahifalarni bir-biriga bog'lash, absolyut va nisbiy manzillar.

Manbalar

  • MDN: "lang", "dir", "translate" global atributlari; <bdi>, <bdo>, <ins>, <del>, <ruby> — developer.mozilla.org
  • W3C Internationalization: "Language tags in HTML and XML", "Inline markup and bidirectional text in HTML" — w3.org/International
Ulashish:Telegram'da

Izohlar (0)

Izoh yozish uchun kiring.

  • Hozircha izoh yo'q. Birinchi bo'ling!
HTML'da ko'p tilli matn: lang, dir, bdi, translate, ins va del — IlmHamroh