HTML sahifa ichidagi havolalar: id, fragment va "yuqoriga" havolasi

Qisqacha: Sahifaning aniq bir joyiga havola qilish uchun o'sha elementga id beriladi, havolada esa # va shu nom yoziladi: <a href="#ichimliklar">. Bosilganda brauzer shu joyga sakraydi. Boshqa sahifaning bo'limiga ham havola qilish mumkin: menyu.html#ichimliklar. href="#" esa sahifa boshiga qaytaradi.

Bu darsda

• id va # bilan sahifa ichidagi havola yarata olasiz.
• Uzun sahifaga mundarija (bo'limlar ro'yxati) qo'shasiz.
• "Yuqoriga" havolasini yasaysiz.
• Boshqa sahifaning aniq bo'limiga havola qilasiz.
• Matn fragmenti (#:~:text=) nima ekanini bilasiz.

Oldin bilishingiz kerak: Havola asoslari: a va href, div va span.

1. Nega bu kerak?

Choyxona menyusi uzaydi: issiq taomlar, salatlar, shirinliklar, ichimliklar — telefonda o'nlab ekran. Foydalanuvchi faqat choy narxini bilmoqchi. U butun sahifani pastga aylantirishi kerakmi?

Yaxshi saytlarda sahifa boshida bo'limlar ro'yxati bor. "Ichimliklar" ni bosasiz — brauzer darhol o'sha bo'limga sakraydi. Wikipedia'dagi "Mundarija", uzun qo'llanmalardagi "Tarkib" — hammasi shu usulda ishlaydi.

O'tgan darsda havola boshqa sahifaga olib bordi. Bugun havola sahifaning ichidagi aniq joyga olib boradi.

2. id — langar, # — unga havola

2.1 Ikki qadam

Birinchi qadam — maqsad elementga id berish. div va span darsida ko'rgan id — elementning noyob nomi:

<h2 id="ichimliklar">Ichimliklar</h2>
<p>Ko'k choy — 5 000 so'm</p>

Ikkinchi qadam — havolada # va shu nom:

<a href="#ichimliklar">Ichimliklarga o'tish</a>

Bosilganda brauzer sahifani aylantiradi — "Ichimliklar" sarlavhasi ekranning tepasiga keladi.

id berilgan element — langar (anchor): kema langari kabi, havola unga "bog'lanadi". # dan keyingi qism — fragment. URL anatomiyasi darsidagi URL qismlarining oxirgisi aynan shu edi.

2.2 Manzil qatoriga qarang

Havolani bosgach, manzil qatori o'zgaradi:

http://127.0.0.1:5500/menyu.html#ichimliklar

Bu foydali uch narsa beradi:

1. Ulashish. Bu manzilni do'stingizga yuborsangiz, u ham to'g'ridan-to'g'ri "Ichimliklar" bo'limida ochadi.
2. Orqaga tugmasi. Brauzerning "Orqaga" tugmasi sizni sakrashdan oldingi joyga qaytaradi.
3. Serverga yuborilmaydi. Fragment faqat brauzer uchun. Server menyu.html ni yuboradi, bo'limni esa brauzer o'zi topadi.

Bo'sh joyni to'ldiring: id="salatlar" bo'limiga havolaning href qiymati:

3. Mundarija

Uzun sahifa boshidagi mundarija — sahifa ichidagi havolalar ro'yxati. Ro'yxatlar darsidagi ul aynan shu yerda kerak:

<h1>Bugungi menyu</h1>

<p>Bo'limlar:</p>
<ul>
  <li><a href="#issiq-taomlar">Issiq taomlar</a></li>
  <li><a href="#salatlar">Salatlar</a></li>
  <li><a href="#ichimliklar">Ichimliklar</a></li>
</ul>

<h2 id="issiq-taomlar">Issiq taomlar</h2>
<p>Osh — 35 000 so'm. Lag'mon — 28 000 so'm.</p>

<h2 id="salatlar">Salatlar</h2>
<p>Achchiq-chuchuk — 12 000 so'm.</p>

<h2 id="ichimliklar">Ichimliklar</h2>
<p>Ko'k choy — 5 000 so'm.</p>

Har bir havola matni sarlavha matni bilan bir xil. Bu foydalanuvchiga ishonch beradi: bosgan narsasi aynan ekranda paydo bo'ladi.

Maslahat: Emmet mundarijani tez yasaydi: ul>li*3>a[href=#]. Keyin har bir # dan keyin nomni yozasiz.

4. "Yuqoriga" havolasi

Uzun sahifaning oxirida foydalanuvchiga boshiga qaytish yo'lini berish yaxshi odat:

<p><a href="#">Yuqoriga qaytish</a></p>

href="#" — bo'sh fragment. HTML standarti bo'yicha brauzer bunda sahifaning eng boshiga qaytadi. href="#top" ham xuddi shunday ishlaydi — agar sahifada id="top" degan element bo'lmasa.

Eng aniq usul — sahifa boshidagi elementga id berish:

<h1 id="boshi">Bugungi menyu</h1>
...
<p><a href="#boshi">Yuqoriga qaytish</a></p>

Endi havola aniq nimaga olib borishi kodda ko'rinib turibdi.

Tekshirib ko'ring: Havola href="#ichimlik", sarlavha esa id="ichimliklar". Bosilganda nima bo'ladi?

5. Boshqa sahifaning bo'limiga havola

Fragmentni sahifa manzili bilan birga yozish mumkin. Bosh sahifadan menyudagi ichimliklar bo'limiga:

<!-- index.html ichida -->
<a href="menyu.html#ichimliklar">Ichimliklar narxi</a>

Brauzer avval menyu.html ni ochadi, keyin "Ichimliklar" bo'limiga sakraydi. Boshqa saytning bo'limiga ham xuddi shunday — to'liq manzil va fragment:

<a href="https://ilmhamroh.uz/dasturlash#html">HTML qismi</a>

Albatta, bu faqat o'sha sahifada shunday id bo'lsa ishlaydi. Begona sahifa o'z id larini o'zgartirsa, havolangiz oddiy havolaga aylanadi — sahifa ochiladi, lekin tepadan.

6. id nomlash qoidalari

Sahifa ichidagi havolalar id ga bog'liq. Shuning uchun id ni ehtiyot bilan tanlang:

Nega apostrofsiz? HTML standarti apostrofga ruxsat beradi. Lekin u URL'da maxsus belgi bo'lib qolishi, CSS va JavaScript'da esa qo'shimcha escape talab qilishi mumkin. html-validate ham uni xato deydi:

element id "bo'lim" must only contain letters, digits, dash and underscore characters

Tarjimasi: "bo'lim id si faqat harf, raqam, defis va pastki chiziqdan iborat bo'lishi kerak." Oddiy harflar va defis bilan yozilgan id hamma joyda muammosiz ishlaydi.

id katta-kichik harfni farqlaydi: #Menyu va #menyu — ikki xil nom.

7. CSS bilan sakrashni chiroyli qilish

Sahifa ichidagi havolalar bilan bog'liq uchta CSS imkoniyati bor. Ularni CSS qismida o'rganamiz, hozir faqat nomlarini bilib qo'ying:

• :target — hozir URL'dagi fragment ko'rsatayotgan elementni ajratib ko'rsatish. Masalan, sakralgan bo'limni bir soniya sariq fon bilan belgilash — foydalanuvchi qayerga kelganini darhol ko'radi.
• scroll-margin-top — sayt tepasida doim qotib turadigan menyu bo'lsa, u sarlavhani yopib qo'yadi. Bu xususiyat sakrashda yuqoridan bo'sh joy qoldiradi.
• scroll-behavior: smooth — keskin sakrash o'rniga silliq aylantirish.

Qanday ko'rinishini tasavvur qilish uchun kichik parcha:

:target { background: lightyellow; }
h2 { scroll-margin-top: 80px; }

8. Matn fragmentlari: id siz ham havola

Ba'zan begona sahifaning aniq bir gapiga havola qilish kerak — lekin u yerda id yo'q. Zamonaviy brauzerlarning ko'pchiligida buning maxsus usuli bor — matn fragmenti (text fragment):

https://example.com/menyu.html#:~:text=Manti

#:~:text= dan keyin qidiriladigan matn yoziladi. Brauzer sahifani ochadi, o'sha matnni topadi, unga aylantiradi va sariq rang bilan belgilaydi.

Qo'lda yozish shart emas. Chrome'da istalgan matnni belgilang, o'ng tugmani bosing va Copy link to highlight ("Belgilangan joyga havolani nusxalash") ni tanlang. Tayyor havola buferga tushadi.

Google qidiruv natijalaridan saytga o'tganda ba'zan sariq belgilangan matnni ko'rgansiz — bu ham aynan shu imkoniyat.

9. Ko'p uchraydigan xatolar

Sahifa ichidagi havolalardagi xatolar jim o'tadi: brauzer xato bermaydi, faqat sakramaydi. Shuning uchun har bir havolani bosib tekshiring.

9.1 # yo'q

<a href="ichimliklar">Ichimliklar</a>

# siz bu — nisbiy yo'l: brauzer ichimliklar degan faylni ochmoqchi bo'ladi va "sahifa topilmadi" beradi. Tuzatish: href="#ichimliklar".

9.2 id ichida #

<h2 id="#ichimliklar">Ichimliklar</h2>

# faqat havolada yoziladi, id da emas. Endi id ning nomi "#ichimliklar" bo'lib qoldi va href="#ichimliklar" uni topa olmaydi. Tuzatish: id="ichimliklar".

9.3 Takrorlangan id

Ikkita bo'limga bir xil id berilsa, havola doim birinchisiga olib boradi. Validator buni topadi: "Duplicate ID". Tuzatish: har bir id noyob bo'lsin.

9.4 Eskirgan name atributi

Eski saytlarda langarni shunday yozishgan:

<a name="ichimliklar"></a>

Bu HTML 4 davridan qolgan usul. Hozir u eskirgan — id ni kerakli elementning o'ziga bering.

10. Mashqlar

1-mashq (oson): Juftlikni to'ldiring

1. <h2 id="shirinliklar"> ga havolaning href qiymati:
2. index.html dan aloqa.html dagi id="xarita" ga havolaning href qiymati:

2-mashq (o'rta): To'rtta xato

<a href="salatlar">Salatlar</a>
<a href="#Ichimliklar">Ichimliklar</a>

<h2 id="#salatlar">Salatlar</h2>
<h2 id="ichimliklar">Ichimliklar</h2>
<h2 id="ichimliklar">Choylar</h2>

<a href="#salatlar">Salatlar</a>
<a href="#ichimliklar">Ichimliklar</a>

<h2 id="salatlar">Salatlar</h2>
<h2 id="ichimliklar">Ichimliklar</h2>
<h2 id="choylar">Choylar</h2>

3-mashq (qiyin): Menyu navigatsiyasi

choyxona/menyu.html ni to'ldiring:

1. h1 ga id="boshi".
2. Kamida uchta h2 bo'lim, har biriga ma'noli id.
3. h1 ostida mundarija — ul ichida bo'limlarga havolalar.
4. Har bir bo'lim oxirida "Yuqoriga" havolasi.
5. index.html ga "Ichimliklar narxi" havolasini qo'shing — u to'g'ridan-to'g'ri menyudagi ichimliklar bo'limini ochsin.
6. Chrome'da menyudagi biror taom nomini belgilab, "Copy link to highlight" bilan havola oling va uni yangi yorliqda oching.

<h1 id="boshi">Bugungi menyu</h1>
<ul>
  <li><a href="#issiq-taomlar">Issiq taomlar</a></li>
  <li><a href="#salatlar">Salatlar</a></li>
  <li><a href="#ichimliklar">Ichimliklar</a></li>
</ul>

<h2 id="issiq-taomlar">Issiq taomlar</h2>
<p>Osh — 35 000 so'm.</p>
<p><a href="#boshi">Yuqoriga</a></p>

<h2 id="salatlar">Salatlar</h2>
<p>Achchiq-chuchuk — 12 000 so'm.</p>
<p><a href="#boshi">Yuqoriga</a></p>

<h2 id="ichimliklar">Ichimliklar</h2>
<p>Ko'k choy — 5 000 so'm.</p>
<p><a href="#boshi">Yuqoriga</a></p>

<a href="menyu.html#ichimliklar">Ichimliklar narxi</a>

11. Real ishda

• Hujjat saytlari (MDN, GitHub README, IlmHamroh darslari) har bir sarlavhaga avtomatik id beradi. Sarlavha yonidagi kichik "#" yoki zanjir belgisi — o'sha bo'limga havola.
• Bir sahifali saytlar (landing page). "Biz haqimizda", "Narxlar", "Aloqa" menyusi ko'pincha shu sahifaning bo'limlariga sakraydi.
• Qo'llab-quvvatlash xizmati. Mijozga "bu savolingizga javob — FAQ sahifasining 3-bo'limida" deyish o'rniga, aniq bo'limga fragmentli havola yuboriladi.
• Accessibility. Ko'p saytlar eng birinchi elementi sifatida "Asosiy kontentga o'tish" havolasini qo'yadi — klaviatura foydalanuvchisi menyuni o'tkazib yuborishi uchun. Bu ham sahifa ichidagi havola. Uni Klaviatura va fokus boshqaruvi darsida ko'ramiz.

Xulosa

• Maqsad elementga id, havolada # va shu nom: <a href="#ichimliklar">.
• # dan keyingi qism — fragment: manzil qatorida ko'rinadi, ulashiladi, serverga yuborilmaydi.
• href="#" — sahifa boshiga; aniqroq usul — h1 id="boshi" va href="#boshi".
• Boshqa sahifa bo'limiga: menyu.html#ichimliklar.
• id — noyob, bo'sh joysiz, apostrofsiz, kichik harfda; katta-kichik harf farqlanadi.
• #:~:text= — id siz ham aniq matnga havola; Chrome'da "Copy link to highlight".

Keyingi dars: Maxsus havolalar va rel qiymatlari — email, telefon, yuklab olish va yangi oynada ochiladigan havolalar.

Manbalar

• MDN: "Linking to an element on the same page", :target, "Text fragments" — developer.mozilla.org
• WHATWG HTML: "Scrolling to a fragment" — html.spec.whatwg.org