Anchor (Havola)
Tavsif
<a> HTML elementi (anchor element) — bu boshqa veb-sahifalar, fayllar, email manzillar, yoki hatto shu sahifadagi boshqa joylarga havola (hyperlink) yaratish uchun ishlatiladi. Har bir <a> elementi ichidagi matn havolaning manzilini ko'rsatishi kerak. Agar href atributi mavjud bo'lsa, Enter tugmasini bosganda havola faollashadi.
Atributlar
| Atribut | Tavsif | Misol |
|---|---|---|
href | Havola manzili (URL). Bu atributsiz <a> element odatiy matn sifatida ko'rinadi. | <a href="https://example.com">Havola</a> |
target | Havolani qayerda ochishni belgilaydi. _blank — yangi oynada, _self — shu oynada (standart). | <a href="https://example.com" target="_blank">Yangi oynada</a> |
rel | Joriy sahifa va havola orasidagi munosabatni belgilaydi. Xavfsizlik uchun target="_blank" bilan birga rel="noopener noreferrer" ishlatiladi. | <a href="https://example.com" rel="noopener noreferrer">Xavfsiz havola</a> |
download | Havolani bosganda fayl yuklab olishni taklif qiladi. Qiymat sifatida fayl nomini berish mumkin. | <a href="/file.pdf" download="hujjat.pdf">Yuklab olish</a> |
title | Havola ustiga sichqonchani olib borganda ko'rinadigan qo'shimcha ma'lumot (tooltip). | <a href="#" title="Bu havola haqida">Havola</a> |
hreflang | Havola ko'rsatayotgan sahifa tilini belgilaydi. | <a href="/en/page" hreflang="en">English version</a> |
Kod misoli
<!-- Oddiy havola -->
<a href="https://www.example.com">Example saytiga o'tish</a>
<!-- Yangi oynada ochish -->
<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">
Google (yangi oynada)
</a>
<!-- Email havola -->
<a href="mailto:info@example.com">Bizga yozing</a>
<!-- Telefon havola -->
<a href="tel:+998901234567">Qo'ng'iroq qiling</a>
<!-- Sahifa ichidagi havola (anchor) -->
<a href="#section-2">2-bo'limga o'tish</a>
<!-- Fayl yuklab olish -->
<a href="/document.pdf" download="hujjat.pdf">
📄 PDF yuklab olish
</a>Foydali maslahatlar
href atributisiz <a> element havola emas, oddiy matn sifatida ko'rinadi.
target="_blank" ishlatganda xavfsizlik uchun doimo rel="noopener noreferrer" qo'shing.
Havola matni aniq bo'lishi kerak — "bu yerni bosing" o'rniga maqsadni yozing.
<a> elementi ichida boshqa interaktiv elementlarni (button, input) joylashtirmang.
mailto: va tel: sxemalari bilan email va telefon havolalari yaratish mumkin.
Mashq topshirig'i
Quyidagi vazifani bajaring: 1. "Google" degan matnli havola yarating, u https://www.google.com manziliga olib borsin. 2. Havola yangi oynada (tab) ochilsin. 3. Xavfsizlik uchun rel atributi qo'shing. 4. Havola ostida "Email yuborish" degan matnli mailto havola ham yarating.
HTML ni ketma-ket o‘rganish: Oson HTML kursi — HTML darslari