Block elementlarni o’rab turuvchi havolalar

Savol: «Block toifadagi elementlarni havola bilan o’rasa bo’ladimi?» — Masha.

Javob: Ha, bo’ladi. Lekin bunda rioya qilinishi kerak bo’lgan ba’zi qoidalar bor. Keling, shularni birga ko’rib chiqamiz.

Oldinlari bunday qilish mumkin emas, bu qoida HTML4 xususiyatlarida qayd qilingandi. U paytda dasturchilar asosan matnlardan iborat bo’lgan saytlar haqida o’ylashar, havolalar oddiy ko’k matn ko’rinishida bo’lar edi. Zamonaviy HTML5 xususiyatlarida esa block toifadagi elementlarni havola bilan o’rasa bo’ladi: endi W3C kod to’g’riligini tasdiqlovchi xizmati buni xato deb ko’rsatmaydi va brauzerlar ham bunday joylashtirilgan elementlarni to’g’ri ko’rsata oladi. Lekin buning bir nozik tomoni bor: havola ichiga havola joylasangiz, natija qanday bo’ladi, qaysi havola ko’rsatgan joyga o’tiladi? Bu ish tushunarsiz vaziyatga olib kelishi mumkin. Shuning uchun ham HTML5 xususiyatlarida bu ish taqiqlangan: interfaol elementni havola ichiga joylab bo’lmaydi.

Havoladan boshqa yana qanday interfaol elementlar mavjud? Foydalanuvchi ishlata oladigan, ta’sir o’tkaza oladigan har qanday element interfaol bo’lishi mumkin: tugmalar (button), forma (form) maydonlari, label, boshqaruv imkoniyati tatbiq qilinmagan video va audio elementlari. Hamma gap elementning interfaolligida. Agar video yoki audiodagi boshqaruv tugmalari o’chirib qo’yilgan bo’lsa, uni havola ichiga joylash mumkin. Sababi boshqarish imkoniyati bo’lmagandan keyin ular o’z interfaolligini yo’qotdi. Xohlagan bir elementingizga uni klaviatura yordamida ajratib ko’rsatish uchun tabindex atributini bersangiz, u interfaol elementga aylanadi va uni havola ichiga joylab bo’lmaydi. Albatta, interfaol elementni havola ichiga joylash o’rniga position xususiyati yordamida havolani boshqa interfaol element ustiga joylashtirishingiz mumkin. Bu o’z o’rnida kod to’g’riligini tasdiqlovchi xizmatda xato ko’rsatilmasligini ta’minlaydi. Lekin bu yo’l bilan ham havolani biron boshqa havola yoki interfaol element ustiga joylashtirib, qaysi elementni bosish mumkinligi aniq bo’lmagan tushunarsiz holatga olib kelish mumkin. Bundan tashqari bu uslub ichida matni bo’lmagan havolatuzilishiga sabab bo’lib, ekranni o’qib beruvchi xizmat (screen reader) havola qayerga borishini bilmay qoladigan vaziyatga olib keladi. Shuning uchun bu uslubdan foydalanmaganingiz yaxshi.

Havolani boshqa havola ichida joylash uchun boshqa murakkabroq yo’llar ham bor. Qiziqayotgan bo’lsangiz, ular haqida Roma Komarovning maqolasida ma’lumot olishingiz mumkin. Eng muhim narsani yodda tuting: block toifadagi elementlarni havola ichiga joylasa bo’ladi. Sharti havola ichida interfaol element bo’lmasligidir.

Maqolada aytib o’tilgan manbalarga linklar:

— Раньше в HTML 4 было нельзя — https://www.w3.org/TR/html4/struct/links.html#h-12.2.2

— Теперь в HTML 5 можно — https://www.w3.org/TR/html/textlevel-semantics.html#the-a-element

— Трюк с позиционированием — http://jsfiddle.net/csswizardry/rxsna/

— Вложенные ссылки, Роман Комаров — http://kizu.ru/fun/nested-links/

Manba:

HTML Academy