HTML maxsus havolalar: mailto, tel, download, target va rel

Qisqacha: Havola faqat sahifaga emas, email yozishga (mailto:), qo'ng'iroq qilishga (tel:) va SMS yuborishga (sms:) ham olib boradi. Maxsus download atributi faylni ochish o'rniga yuklab oladi. Havolani yangi oynada ochish uchun target="_blank" yoziladi, xavfsizlik uchun esa unga rel="noopener" qo'shiladi. Umuman olganda rel atributi havola qilingan sahifa bilan munosabatni aytadi: reklama, foydalanuvchi havolasi yoki sizning profilingiz.

Bu darsda

• Email, telefon va SMS havolalarini to'g'ri formatda yozasiz.
• Faylni download bilan yuklab olinadigan qilasiz.
• target="_blank" ni qachon ishlatish kerakligini va uning xavfini tushunasiz.
• nofollow, ugc, sponsored, me va hreflang nima uchun kerakligini bilasiz.
• "Teskari tabnabbing" hujumi qanday ishlashini tushuntira olasiz.

Oldin bilishingiz kerak: Havola asoslari: a va href, Bo'sh joylar va qator uzish qoidasi.

1. Nega bu kerak?

Choyxona saytidagi "Aloqa" sahifasini telefonda ochgan mijozni tasavvur qiling. U raqamni ko'radi: "+998 90 000 00 00". Qo'ng'iroq qilish uchun raqamni eslab qolishi, sahifadan chiqishi va qo'lda terishi kerak.

Yaxshi saytda esa raqamni bir marta bosasiz — telefon qo'ng'iroq oynasini ochadi. Email ham shunday: bosasiz — pochta ilovasi tayyor manzil bilan ochiladi. Menyuni PDF qilib yuklab olish — bitta bosish.

Bularning hammasi — o'sha tanish a tegi. Faqat href da https:// o'rniga boshqa sxema turadi.

2. Email: mailto:

<a href="mailto:info@example.com">info@example.com</a>

Bosilganda foydalanuvchining pochta ilovasi (Gmail, Outlook) ochiladi va "Kimga" maydonida info@example.com turadi.

Mavzu va xat matnini ham oldindan to'ldirish mumkin. Ular ? dan keyin yoziladi, bir-biridan & bilan ajratiladi:

<a href="mailto:info@example.com?subject=Stol%20band&amp;body=Salom!">
  Stol band qilish uchun yozing
</a>

• subject — xat mavzusi.
• body — xat matni.
• %20 — bo'sh joy. URL anatomiyasi darsida ko'rgandek, manzil ichida bo'sh joy kodlanadi.
• & — & belgisi. Maxsus belgilar darsidagi qoida: HTML ichida & ni & deb yozish xavfsizroq. Brauzer uni & ga aylantirib yuboradi.

Diqqat: Kompyuterda pochta ilovasi sozlanmagan bo'lsa, mailto: havolasi hech narsa qilmaydi yoki notanish dasturni ochadi. Shuning uchun email manzilini havola matnida ham to'liq yozing — foydalanuvchi uni ko'chirib olsin.

3. Telefon: tel:

<a href="tel:+998900000000">+998&nbsp;90&nbsp;000&nbsp;00&nbsp;00</a>

Telefonda bosilganda qo'ng'iroq oynasi raqam bilan ochiladi. Kompyuterda esa odatda qo'ng'iroq dasturi taklif qilinadi.

Ikki qoida:

1. href da raqam bo'sh joysiz, xalqaro formatda: +998 bilan. Faqat 90 000 00 00 yozsangiz, chet eldagi telefon uni boshqa davlat raqami deb o'ylashi mumkin.
2. Matnda esa odamga qulay: bo'lingan va   bilan bog'langan — Bo'sh joylar darsidagi kabi, raqam ikki qatorga bo'linib ketmasin.

href ichida bo'sh joy qoldirsangiz, Nu HTML Checker xato beradi:

Error: Bad value “tel:+998 90 000 00 00” for attribute “href” on element “a”: Illegal character after “tel:”. Space is not allowed.

Tarjimasi: "a elementining href atributi uchun yaroqsiz qiymat: tel: dan keyin taqiqlangan belgi. Bo'sh joyga ruxsat yo'q."

html-validate esa matnga ham e'tibor beradi: raqamdagi oddiy bo'sh joylarni   ga almashtirishni talab qiladi (tel-non-breaking qoidasi).

4. SMS va messenjerlar

4.1 sms:

<a href="sms:+998900000000?body=Salom,%20stol%20band%20qilmoqchiman">
  SMS yuborish
</a>

Telefonda SMS ilovasi raqam va tayyor matn bilan ochiladi. body parametrini qo'llab-quvvatlash telefon turiga qarab farq qilishi mumkin — shuning uchun matnni SMS'ning o'zida tahrirlash mumkinligini unutmang.

4.2 Telegram va WhatsApp

O'zbekistonda SMS'dan ko'ra messenjerlar ko'proq ishlatiladi. Ular uchun maxsus sxema shart emas — oddiy https:// havolalar ishlaydi:

<a href="https://t.me/sizning_kanal">Telegram'da yozish</a>
<a href="https://wa.me/998900000000">WhatsApp'da yozish</a>

t.me/ dan keyin — Telegram foydalanuvchi yoki kanal nomi. wa.me/ dan keyin — xalqaro formatdagi raqam, lekin + va bo'sh joylarsiz. Telefonda bosilsa, tegishli ilova ochiladi.

Tekshirib ko'ring: <a href="tel:90 000 00 00"> da nechta muammo bor?

5. download — faylni yuklab olish

Menyuni PDF shaklida ham beraylik. Oddiy havola PDF'ni brauzer ichida ochadi. download atributi esa uni yuklab oladi:

<a href="fayllar/menyu.pdf" download>Menyuni yuklab olish (PDF)</a>

Atributga qiymat bersangiz, fayl shu nom bilan saqlanadi:

<a href="fayllar/menyu-2026-09.pdf" download="bahor-menyu.pdf">
  Menyuni yuklab olish (PDF, 250 KB)
</a>

Diskdagi fayl nomi texnik (menyu-2026-09.pdf), foydalanuvchi esa chiroyli nomni oladi (bahor-menyu.pdf).

Bilish kerak bo'lgan ikki narsa:

• download faqat o'z saytingizdagi fayllar uchun ishlaydi. Boshqa saytdagi faylga havolada brauzer bu atributni e'tiborsiz qoldiradi va faylni oddiy ochadi. Bu xavfsizlik qoidasi.
• Havola matnida fayl turi va hajmini ayting: "(PDF, 250 KB)". Foydalanuvchi, ayniqsa sekin mobil internetda, nimani yuklab olayotganini bilsin.

6. target="_blank" — yangi oynada ochish

6.1 Qanday ishlaydi

<a href="https://ilmhamroh.uz" target="_blank">IlmHamroh</a>

target="_blank" havolani yangi yorliqda (tab) ochadi. Joriy sahifa o'z joyida qoladi.

6.2 Qachon ishlatish kerak?

Ko'p boshlovchilar "foydalanuvchi saytimdan ketib qolmasin" deb har bir tashqi havolaga _blank qo'yadi. Bu odatda noto'g'ri qaror:

• Foydalanuvchi o'zi hal qilishni yaxshi ko'radi. Yangi yorliq kerak bo'lsa, u Ctrl bosib yoki o'rta tugma bilan ochadi.
• Yangi yorliqda "Orqaga" tugmasi ishlamaydi — foydalanuvchi adashadi.
• Ekran o'quvchi foydalanuvchisi yangi yorliq ochilganini sezmasligi mumkin.

Qachon o'rinli: foydalanuvchi joriy sahifada muhim ish qilayotganda — masalan, forma to'ldirayotganda "Foydalanish shartlari" havolasi. Yangi oynada ochilsa, forma ma'lumotlari yo'qolmaydi.

Ishlatsangiz — foydalanuvchini ogohlantiring:

<a href="shartlar.html" target="_blank">
  Foydalanish shartlari (yangi oynada ochiladi)
</a>

7. Hujumchi nigohi: teskari tabnabbing

target="_blank" bilan ochilgan yangi sahifa eski sahifani ko'ra oladi. Uzoq yillar u eski sahifani boshqa manzilga yo'naltira olardi ham. Hujum shunday bo'ladi:

1. Choyxona sayti izohlarida kimdir havola qoldiradi. Sayt uni target="_blank" bilan ochadi.
2. Mijoz havolani bosadi. Yangi yorliqda hujumchining sahifasi ochiladi — u oddiy maqolaga o'xshaydi.
3. Shu paytda hujumchi sahifasi JavaScript orqali birinchi yorliqni almashtiradi: choyxona sayti o'rniga uning aynan nusxasi — soxta "Kirish" sahifasi.
4. Mijoz birinchi yorliqqa qaytadi va "sessiya tugadi, qayta kiring" ni ko'radi. U hech narsadan shubhalanmay parolini yozadi.

Bu hujum teskari tabnabbing (reverse tabnabbing) deyiladi: "yorliqni o'g'irlash".

Himoya — rel="noopener". U yangi sahifaning eski sahifaga bo'lgan aloqasini uzadi:

<a href="https://example.com" target="_blank"
   rel="noopener noreferrer">Tashqi maqola</a>

• noopener — yangi sahifa eski sahifani boshqara olmaydi.
• noreferrer — bundan tashqari, yangi sayt foydalanuvchi qaysi sahifadan kelganini (HTTP sarlavhalari darsidagi Referer sarlavhasini) ham bilmaydi.

Yaxshi xabar: 2021-yildan beri asosiy brauzerlar target="_blank" havolalarga noopener ni avtomatik qo'llaydi. Lekin eski brauzerlar hali ham uchraydi, va rel="noopener" ni aniq yozish niyatingizni ko'rsatadi. Shuning uchun qoida o'zgarmaydi: target="_blank" bo'lsa — rel="noopener" ham bo'lsin.

8. rel — havola bilan munosabat

rel (relationship — munosabat) atributi joriy sahifa va havola qilingan sahifa o'rtasidagi munosabatni aytadi. noopener va noreferrer dan tashqari bir nechta muhim qiymatlar bor.

8.1 Qidiruv tizimlari uchun

Google havolalarni "tavsiya" deb hisoblaydi: ko'p saytlar havola qilgan sahifa — ishonchli. Lekin hamma havola ham tavsiya emas:

<p>Mijoz izohi: <a href="https://example.com" rel="ugc nofollow">
mening blogim</a></p>
<p>Homiyimiz: <a href="https://example.com" rel="sponsored">
Choy do'koni</a></p>

Bir nechta qiymat bo'sh joy bilan yoziladi. Izohlardagi havolalarga ugc qo'yish spamerlarni ham to'xtatadi: ular izohlarga havola tashlab, o'z saytini Google'da ko'tarishni xohlashadi.

8.2 rel="me" — bu mening profilim

rel="me" — "havola qilingan sahifa ham menga tegishli". Masalan, choyxona saytidan uning ijtimoiy tarmoqdagi profiliga:

<a href="https://mastodon.social/@sizning_profil" rel="me">
  Mastodon'dagi sahifamiz</a>

Ba'zi platformalar (masalan, Mastodon) buni tekshiradi: agar sayt profilga rel="me" bilan havola qilsa, profilda "tasdiqlangan sayt" belgisi chiqadi.

8.3 hreflang — havola qilingan sahifa tili

hreflang havola boshqa tildagi sahifaga olib borishini bildiradi:

<a href="ru/menyu.html" hreflang="ru" lang="ru">Меню на русском</a>

hreflang="ru" — "olib boradigan sahifa ruscha". lang="ru" esa havola matnining o'zi ruscha ekanini aytadi — Ko'p tilli matn darsidagi kabi. Til almashtirish tugmalarida ikkalasi ham kerak.

9. Ko'p uchraydigan xatolar

9.1 href da bo'sh joyli telefon

3-bo'limda ko'rdik: tel:+998 71 ... — validator xatosi, ba'zi telefonlarda esa raqam noto'g'ri teriladi. Tuzatish: href da faqat + va raqamlar.

9.2 target="_blank" hamma joyda

Har bir havola yangi oynada ochiladi — foydalanuvchi o'nlab yorliqlar orasida adashadi. Tuzatish: faqat haqiqatan kerak joyda, ogohlantirish bilan va rel="noopener" bilan.

9.3 download boshqa saytdagi faylga

<a href="https://example.com/menyu.pdf" download>Yuklab olish</a>

Brauzer download ni e'tiborsiz qoldiradi va PDF'ni ochadi. Tuzatish: faylni o'z saytingizga joylang yoki foydalanuvchiga "faylni saqlash uchun o'ng tugmani bosing" deb yozing.

9.4 Faqat mailto: — matnsiz

<a href="mailto:info@example.com">Bizga yozing</a>

Pochta ilovasi sozlanmagan foydalanuvchi email manzilini ko'ra olmaydi. Tuzatish: manzilni matnda ham ko'rsating: "Bizga yozing: info@example.com".

10. Mashqlar

1-mashq (oson): Sxemani tanlang

1. Qo'ng'iroq qilish havolasi boshlanadi:
2. Email yozish havolasi boshlanadi:
3. Faylni yuklab olish uchun atribut:

2-mashq (o'rta): Xatolarni tuzating

<a href="tel:90 000-00-00">Qo'ng'iroq qiling</a>
<a href="https://example.com" target="_blank">Hamkorimiz</a>
<a href="mailto:info@example.com">bu yerga</a>

<a href="tel:+998900000000">+998&nbsp;90&nbsp;000&nbsp;00&nbsp;00</a>
<a href="https://example.com" target="_blank" rel="noopener">
  Hamkorimiz (yangi oynada)
</a>
<p>Bizga yozing: <a href="mailto:info@example.com">info@example.com</a></p>

3-mashq (qiyin): "Aloqa" sahifasi

choyxona/aloqa.html ga kontaktlar blokini yozing:

1. Telefon — bosilsa qo'ng'iroq bo'lsin.
2. Email — mavzusi "Stol band qilish" tayyor turgan havola.
3. Telegram kanal havolasi.
4. PDF menyuni yuklab olish havolasi — fayl bahor-menyu.pdf nomi bilan saqlansin, havola matnida fayl turi va hajmi.
5. "Foydalanish shartlari" havolasi — yangi oynada, xavfsiz, ogohlantirish bilan.
6. npx html-validate aloqa.html — xato 0.

<h1>Biz bilan bog'lanish</h1>
<ul>
  <li>Telefon: <a href="tel:+998900000000">
    +998&nbsp;90&nbsp;000&nbsp;00&nbsp;00</a></li>
  <li>Email:
    <a href="mailto:info@example.com?subject=Stol%20band%20qilish">
    info@example.com</a></li>
  <li>Telegram:
    <a href="https://t.me/sizning_kanal">t.me/sizning_kanal</a></li>
</ul>
<p><a href="fayllar/menyu.pdf" download="bahor-menyu.pdf">
  Menyuni yuklab olish (PDF, 250 KB)</a></p>
<p><a href="shartlar.html" target="_blank" rel="noopener">
  Foydalanish shartlari (yangi oynada ochiladi)</a></p>

11. Real ishda

• Mobil foydalanuvchilar. O'zbekistonda saytlarning katta qismi telefondan ochiladi. Bosiladigan telefon raqami — kafe, klinika, taksi saytlari uchun eng ko'p bosiladigan tugma.
• SEO va izohlar. Blog va forumlar izohlardagi havolalarga avtomatik rel="ugc nofollow" qo'shadi. Aks holda ular spam havolalar bilan to'lib ketadi.
• Reklama qonunchiligi. Pullik havolalarni sponsored bilan belgilash — Google talabi. Belgilanmagan pullik havolalar uchun sayt qidiruvda jazolanishi mumkin.
• Xavfsizlik tekshiruvlari. Audit vositalari rel="noopener" siz target="_blank" havolalarni hali ham ogohlantirish sifatida ko'rsatadi.

Xulosa

• mailto: — email (?subject= va &body=), tel: — qo'ng'iroq (xalqaro, bo'sh joysiz), sms: — SMS.
• Telegram va WhatsApp uchun oddiy https://t.me/... va https://wa.me/... havolalar.
• download faylni yuklab oladi, faqat o'z saytingizdagi fayllar uchun; matnda tur va hajmni ayting.
• target="_blank" — kam va ogohlantirish bilan; doim rel="noopener" bilan.
• Teskari tabnabbing: yangi yorliq eski yorliqni soxta sahifaga almashtiradi — noopener himoya qiladi.
• rel: nofollow, ugc, sponsored — Google uchun; me — profil tasdig'i; hreflang — havola qilingan sahifa tili.

Keyingi dars: Tugma yoki havola: to'g'ri tanlov — qachon a, qachon button va nega ularni almashtirish accessibility'ni buzadi.

Manbalar

• MDN: <a> (download, target, rel), "Link types" — developer.mozilla.org
• Google Search Central: "Qualify your outbound links to Google" — developers.google.com/search
• OWASP: "Reverse Tabnabbing" — owasp.org