Tugmalar va havolalar

---

Nega

Tugmalar va havolalar — interaktiv komponentlarning alohida turlari. Ularning har biri yordamchi texnologiyalar bilan turlicha ishlaydi. Har bir komponentdan to‘g‘ri foydalanish yordamchi texnologiyalardan foydalanuvchilarga ushbu komponent bilan ishlashda yordam beradi.

---

Nima

<button> elementi joriy sahifada biror amalni bajaradigan har qanday o‘zaro ta’sir uchun ishlatilishi kerak. <a> elementi esa boshqa ko‘rinishga o‘tkazadigan har qanday o‘zaro ta’sir uchun ishlatilishi kerak.

---

Qanday

Kirish qismida vizual dizayn qaysi HTML elementdan foydalanishimizni belgilamasligini ko‘rdik. Tugmaga o‘xshasa-da, havola kabi ishlaydigan havola <a> bo‘ladi.

"Tugma" Sign up to drive ham, uning ostidagi havola ham <a> sifatida kodlangan. Unda <button> qachon ishlatilishi kerak?

Keling, Uber veb-saytini yaqindan ko‘rib chiqamiz. Header’ning birinchi qismida beshta element bor – logotip, ochiladigan menyu va uchta havola. Ulardan biri <button> sifatida kodlangan.

Company bosilganda ochiladigan menyu ochiladi. Bu joriy sahifada amal bajaradigan o‘zaro ta’sirdir. Bu yerda <button> ishlatish to‘g‘ri yechim. Uning ostidagi About us, Our offerings va boshqa havolalar <a> elementlari bilan to‘g‘ri kodlangan.

Strelka bu ochiladigan menyuli tugma ekanini bildiradi va menyu ochilganda yo‘nalishini o‘zgartiradi. Bu yoqimli qo‘shimcha vizual ishora.

Buning afzalliklaridan biri shundaki, semantik HTML sahifa mazmunini ovoz chiqarib o‘qiydigan ekran o‘quvchi dasturlarga kontekst beradi. Ekran o‘quvchi dasturlar haqida yordamchi texnologiyalarga bag‘ishlangan 7-modulda batafsilroq bilib olasiz.

Bu holatda <div> noto‘g‘ri. Nega?

• Tugmalar sukut bo‘yicha mosroq uslubga ega.
• Ekran o‘quvchi dastur uni tugma sifatida aniqlaydi.
• Unga fokus berish mumkin.
• Uni bosish mumkin.

Havola ham, tugma ham faqat klaviatura yordamida harakatlanadigan insonlar uchun qulay: ularni sichqoncha bilan ham, klavishlar bilan ham bosish mumkin, klaviaturadagi Tab tugmasi yordamida esa ular orasida o‘tish mumkin.

Endi siz qachon <button>, qachon <a> ishlatishni bilasiz. Yana nimalarni yodda tutish kerak?

---

---

To‘g‘ri havolalar

Havolalar foydalanuvchilarni bir sahifadan boshqasiga, ba’zan esa sahifaning boshqa qismiga olib o‘tadi. Havola qulay bo‘lishi uchun quyidagilarni unutmang:

• Havola manzilini ko‘rsatish uchun href atributidan foydalaning.
• href atributida to‘g‘ri URL ishlating. URL mutlaq (absolute) yoki nisbiy (relative) bo‘lishi mumkin. https://uber.com/about — mutlaq URL. /about — nisbiy URL.
• Havolani <span> yoki <div> kabi boshqa elementlar bilan taqlid qilmang.
• Havolani joriy oynada oching. Havolalarni yangi oynada ochish tavsiya etilmaydi.

Uber misolidagi About us havolasi biroz soddalashtirilgan holda quyidagicha kodlangan:

Bu to‘g‘ri va sog‘lom havola.

---