Tugma yoki havola: HTML'da button va a ni to'g'ri tanlash

Qisqacha: Havola (a) — boshqa joyga olib boradi: sahifaga, bo'limga, faylga. Tugma (button) — shu joyning o'zida harakat bajaradi: savatga qo'shadi, menyuni ochadi, formani yuboradi. Ular CSS bilan bir xil ko'rinishi mumkin, lekin klaviatura, ekran o'quvchi va brauzer ularga har xil munosabatda bo'ladi. Havola ichida tugma yoki boshqa havola bo'lmaydi.

Bu darsda

• "Havola yoki tugma?" savoliga bitta qoida bilan javob berasiz.
• Havola va tugma foydalanuvchiga nimalarni "bepul" berishini bilasiz.
• href="#", javascript: va bosiladigan div nega yomonligini tushuntira olasiz.
• Ichma-ich interaktiv elementlar taqiqini va uning sababini bilasiz.
• Choyxona saytidagi har bir bosiladigan element uchun to'g'ri tegni tanlaysiz.

Oldin bilishingiz kerak: Maxsus havolalar va rel qiymatlari, div va span.

1. Nega bu kerak?

Onlayn do'kon saytida ikkita yashil tugmani ko'rasiz: "Mahsulotni ko'rish" va "Savatga qo'shish". Ko'rinishi bir xil. Lekin ular butunlay boshqa ish qiladi:

• "Mahsulotni ko'rish" — sizni boshqa sahifaga olib boradi.
• "Savatga qo'shish" — sahifadan chiqmasdan savatdagi sonni oshiradi.

Birinchisi — havola, ikkinchisi — tugma. Dizayner ikkalasini bir xil chizgan. Lekin HTML'da ular turli teglar bo'lishi shart. Aks holda sayt klaviatura bilan ishlamaydi, ekran o'quvchi foydalanuvchini aldaydi, brauzerning qulay imkoniyatlari esa yo'qoladi.

Tugma bilan HTML nima darsida tanishgan edik: <button>Buyurtma berish</button>. Bugun uni havoladan farqlashni o'rganamiz. Tugmaning barcha imkoniyatlarini esa formalar modulida, Tugmalar va yuborish darsida ko'ramiz.

2. Asosiy qoida

O'zingizga bitta savol bering: "Bosilgandan keyin manzil qatori o'zgaradimi?"

• Ha — foydalanuvchi boshqa joyga ketadi → a (havola).
• Yo'q — shu sahifada nimadir sodir bo'ladi → button (tugma).

Tekshirib ko'ring: Telefondagi sayt menyusini ochuvchi ☰ belgisi — havolami yoki tugma?

3. Har biri nimani "bepul" beradi

To'g'ri teg tanlasangiz, brauzer ko'p ishni o'zi qiladi. Siz bir qator ham kod yozmaysiz.

3.1 Havola beradigan imkoniyatlar

• Sichqoncha ustiga olib borilganda pastki burchakda manzil ko'rinadi.
• Ctrl bosib yoki sichqonchaning o'rta tugmasi bilan yangi yorliqda ochish.
• O'ng tugma menyusida "Havolani nusxalash".
• Sahifani saqlab qo'yish (bookmark) va "Orqaga" tugmasi.
• Google robot havolani kuzatib, keyingi sahifani topadi.
• Klaviaturada: Tab bilan yetib borish va Enter bilan ochish.
• Ekran o'quvchi uni "havola" deb e'lon qiladi.

3.2 Tugma beradigan imkoniyatlar

• Klaviaturada: Tab bilan yetib borish, Enter va Space (bo'sh joy tugmasi) bilan bosish.
• Ekran o'quvchi uni "tugma" deb e'lon qiladi — foydalanuvchi "bu harakat bajaradi" deb tushunadi.
• disabled atributi bilan o'chirish (Teg, element va atribut darsida ko'rgan boolean atribut).
• Formani yuborish — formalar modulida o'rganamiz.

Space qatoriga e'tibor bering. Klaviatura foydalanuvchilari buni bilishadi: havola Space bosilganda sahifani pastga aylantiradi, tugma esa bosiladi. Noto'g'ri teg ularning kutganini buzadi.

4. Antipatternlar: yomon, lekin ko'p uchraydigan usullar

Quyidagi kodlarning hammasi ekranda "ishlaydi". Lekin har biri kimgadir saytni buzadi. Ularni boshqalarning kodida albatta uchratasiz.

Misollarda onclick atributi bor — u element bosilganda JavaScript kodini ishga tushiradi. JavaScript'ni hali o'rganmadik. Hozircha shuni bilish yetarli: onclick ichidagi kod "savatga qo'sh" kabi biror ishni bajaradi.

4.1 href="#" — tugma o'rniga havola

<a href="#" onclick="savatgaQosh()">Savatga qo'shish</a>

Muammolar:

• Ekran o'quvchi "havola" deydi — foydalanuvchi boshqa sahifaga o'tishini kutadi.
• href="#" sahifani eng tepaga otib yuboradi (Sahifa ichidagi havolalar darsida ko'rdik). Foydalanuvchi pastda mahsulot tanlayotgan edi — endi uni qidirishi kerak.
• Manzil qatoriga # qo'shiladi, "Orqaga" tugmasi g'alati ishlay boshlaydi.
• Ctrl bosib bosilsa, joriy sahifa yangi yorliqda ochiladi — hech qanday mahsulot qo'shilmaydi.
• Space bosilganda ishlamaydi.

To'g'risi:

<button type="button" onclick="savatgaQosh()">
  Savatga qo'shish
</button>

type="button" — "bu oddiy tugma, formani yubormaydi". Buni formalar modulida batafsil ko'ramiz. Hozircha qoida: harakat tugmasiga doim type="button" yozing.

4.2 href="javascript:..."

<a href="javascript:void(0)" onclick="savatgaQosh()">
  Savatga qo'shish
</a>

href="#" ning "takomillashgan" varianti: sahifa tepaga sakramaydi. Lekin qolgan muammolarning hammasi saqlanadi. Ustiga-ustak, zamonaviy saytlardagi xavfsizlik sozlamalari (CSP) bunday havolalarni ko'pincha umuman bloklaydi. To'g'risi — o'sha button.

4.3 Bosiladigan div

<div class="tugma" onclick="savatgaQosh()">Savatga qo'shish</div>

div va span darsida ko'rdik: div ga Tab bilan yetib bo'lmaydi, ekran o'quvchi uni tugma deb tanimaydi. Klaviatura foydalanuvchisi uchun bu tugma umuman mavjud emas.

4.4 Havola o'rniga tugma

Teskari xato ham bor:

<button type="button" onclick="location.href='menyu.html'">
  Menyu
</button>

Tugma bosilganda JavaScript foydalanuvchini menyu.html ga o'tkazadi. Ishlaydi. Lekin:

• Yangi yorliqda ochib bo'lmaydi, havolani nusxalab bo'lmaydi.
• Google bu "havola"ni ko'rmaydi — menyu.html ni topmasligi mumkin.
• Ekran o'quvchi "tugma" deydi — foydalanuvchi sahifadan chiqib ketishini kutmaydi.

To'g'risi: <a href="menyu.html">Menyu</a>. Tugmaga o'xshashi kerak bo'lsa — CSS bilan.

Tekshirib ko'ring: Nega <a href="#" onclick="..."> da foydalanuvchi pastda turgan bo'lsa, u yomonroq tuyuladi?

5. Ko'rinish — CSS, vazifa — HTML

Dizaynda ko'pincha havola tugmaga o'xshaydi. Masalan, bosh sahifadagi katta yashil "Buyurtma berish" yozuvi buyurtma sahifasiga olib boradi. Bu — havola. Uni a bilan yozasiz va CSS bilan tugmaga o'xshatasiz:

<a href="buyurtma.html" class="katta-tugma">Buyurtma berish</a>

Klass nomi "katta-tugma" bo'lsa ham, teg — a. Chunki vazifasi — boshqa sahifaga olib borish.

Urg'u teglari darsidagi qoida bu yerda ham ishlaydi: tegni ma'noga qarab tanlang, ko'rinishni CSS'ga qoldiring.

6. Ichma-ich interaktiv elementlar taqiqi

6.1 Qoida

Interaktiv element ichida boshqa interaktiv element bo'lmaydi:

• a ichida a
• a ichida button
• button ichida a
• button ichida button

Sababi oddiy: foydalanuvchi ichkaridagini bosganda — qaysi biri ishlashi kerak? Havola sahifani ochishi kerakmi yoki tugma savatga qo'shishi? Brauzer ham, ekran o'quvchi ham bunga aniq javob bera olmaydi.

6.2 Brauzer nima qiladi

Havola ichida havola yozsangiz, brauzer ichkisini ko'rgan zahoti tashqisini yopadi:

<a href="menyu.html">Menyu va <a href="osh.html">osh</a></a>

Elements panelida:

<a href="menyu.html">Menyu va </a><a href="osh.html">osh</a>

Ikkita alohida havola bo'lib qoldi — siz rejalashtirgan tuzilma buzildi.

6.3 Validator xabarlari

Nu HTML Checker bu xatolarni aniq ko'rsatadi:

Error: The element “button” must not appear as a descendant of the “a” element.
Error: The element “a” with the attribute “href” must not appear as a descendant of the “button” element.

Tarjimasi: "button elementi a elementining avlodi (ichidagi element) bo'lmasligi kerak." va "href atributli a elementi button elementining avlodi bo'lmasligi kerak."

Havola ichida havola uchun esa: "Start tag “a” seen but an element of the same type was already open." — "Xuddi shu turdagi element ochiq turganida yana a ochuvchi tegi uchradi."

6.4 Tipik holat: kartochka

Havola asoslari darsida butun taom kartochkasini havola qilgan edik. Endi unga "Savatga qo'shish" tugmasini qo'shmoqchisiz:

<a href="taomlar/osh.html">
  <h3>Toshkent oshi</h3>
  <p>35 000 so'm</p>
  <button type="button">Savatga qo'shish</button>
</a>

Bu — taqiqlangan tuzilma. To'g'ri yechim: havolani faqat taom nomiga qo'yish, tugmani esa alohida qoldirish:

<div class="taom-karta">
  <h3><a href="taomlar/osh.html">Toshkent oshi</a></h3>
  <p>35 000 so'm</p>
  <button type="button">Savatga qo'shish</button>
</div>

Butun kartochka bosiladigan bo'lishi kerak bo'lsa — buni CSS yordamida qilish mumkin, HTML tuzilmasi esa to'g'ri qoladi. Bu usulni CSS qismida ko'ramiz.

7. Ko'p uchraydigan xatolar

7.1 Tugmada type yo'q

<button onclick="savatgaQosh()">Savatga qo'shish</button>

Hozircha bu ishlaydi. Lekin kelajakda tugma formaning ichiga tushsa, u formani yuborib yuboradi — chunki type yozilmagan tugma standart bo'yicha "yuborish" tugmasi. html-validate buni oldindan ogohlantiradi:

<button> is missing recommended "type" attribute

Tarjimasi: "button da tavsiya etilgan type atributi yo'q." Tuzatish: type="button".

7.2 Hamma narsa havola

Ba'zi saytlarda "Yoqdi", "Ulashish", "Yopish" — hammasi <a href="#">. Tuzatish: manzil o'zgarmaydigan har bir harakat — button.

7.3 Havola matni o'rniga faqat ikonka

<a href="aloqa.html">📞</a> — ekran o'quvchi nima deb o'qiydi? Ko'pincha "havola" deb, xolos. Tuzatish: ikonka yonida matn yozing, yoki ekranda yashirin, lekin o'qiladigan matn qo'shing. Ikkinchi usulni accessibility modulida ko'ramiz.

8. Mashqlar

1-mashq (oson): a yoki button?

1. "Bog'lanish" sahifasiga o'tish →
2. Rasmni kattalashtirib ko'rsatish (sahifadan chiqmasdan) →
3. "Keyingi dars" — keyingi sahifaga o'tish →

2-mashq (o'rta): Kodni tuzating

<a href="#" onclick="savatgaQosh()">Savatga qo'shish</a>
<button onclick="location.href='aloqa.html'">Aloqa</button>
<a href="menyu.html">
  Menyu
  <a href="menyu.html#ichimliklar">Ichimliklar</a>
</a>

<button type="button" onclick="savatgaQosh()">
  Savatga qo'shish
</button>
<a href="aloqa.html">Aloqa</a>
<a href="menyu.html">Menyu</a>
<a href="menyu.html#ichimliklar">Ichimliklar</a>

3-mashq (qiyin): Taom kartochkalari

choyxona/menyu.html dagi uchta taom kartochkasini qayta yozing:

1. Taom nomi — o'sha taom sahifasiga havola (taomlar/osh.html, taomlar/lagmon.html, taomlar/manti.html).
2. Har bir kartochkada "Savatga qo'shish" tugmasi (onclick siz, faqat to'g'ri teg va type).
3. Eng mashhur taomda qo'shimcha "Batafsil" havolasi — u o'sha sahifaga olib borsin. Havola matni alohida o'qilganda ham tushunarli bo'lsin.
4. npx html-validate — xato 0.

<div class="taom-karta">
  <h3><a href="taomlar/osh.html">Toshkent oshi</a></h3>
  <p>35 000 so'm</p>
  <p><a href="taomlar/osh.html">Osh haqida batafsil</a></p>
  <button type="button">Savatga qo'shish</button>
</div>

<div class="taom-karta">
  <h3><a href="taomlar/lagmon.html">Lag'mon</a></h3>
  <p>28 000 so'm</p>
  <button type="button">Savatga qo'shish</button>
</div>

<div class="taom-karta">
  <h3><a href="taomlar/manti.html">Manti</a></h3>
  <p>30 000 so'm</p>
  <button type="button">Savatga qo'shish</button>
</div>

9. Real ishda

• Accessibility auditi — "bosiladigan div" va "href="#" li tugmalar" eng ko'p topiladigan xatolar ro'yxatida. Ularni tuzatish ko'pincha bitta tegni almashtirishdan iborat.
• React va boshqa freymvorklar (kursda alohida o'rganamiz) — havola uchun maxsus Link komponenti, harakat uchun button. Ichkarida baribir shu ikki teg. Qoidani bilmagan dasturchi freymvorkda ham xato qiladi.
• Kod review'da "bu button bo'lishi kerak" izohi — junior dasturchilar eng ko'p oladigan izohlardan biri.
• Intervyu savoli: "a va button qachon ishlatiladi?" — javobingiz: "manzil o'zgarsa a, harakat bo'lsa button, ko'rinish — CSS".

Xulosa

• Manzil o'zgarsa — a, shu sahifada harakat — button.
• Havola beradi: yangi yorliq, nusxalash, bookmark, "Orqaga", Google uchun ko'rinish.
• Tugma beradi: Enter va Space, "tugma" roli, disabled; harakat tugmasiga type="button".
• href="#", javascript: va bosiladigan div — tugma o'rnini bosa olmaydi.
• Havola ko'rinishida tugma kerak bo'lsa ham teg vazifaga qarab tanlanadi, ko'rinish — CSS.
• Interaktiv ichida interaktiv yo'q: a ichida a yoki button, button ichida a — taqiqlangan.

Keyingi dars: Ko'p sahifali sayt tuzilmasi — papkalar, toza URL'lar, umumiy navigatsiya va 404 sahifasi.

Manbalar

• MDN: <button>, <a>, "Interactive content" — developer.mozilla.org
• WebAIM: "Links and Buttons" — webaim.org