लोड हो रहा है...

HTML बुकमार्क

Link Titles & Targets ने बदला कि लिंक कैसे खुलता है। बुकमार्क (fragment लिंक) बदलते हैं कि आप पेज पर कहाँ पहुँचते हैं। लंबे पाठ, FAQ और दस्तावेज़ों को अक्सर «Pricing», «FAQ» या «Back to top» पर कूदने की ज़रूरत होती है — बिना नया दस्तावेज़ लोड किए। यह पैटर्न गंतव्य पर एक अद्वितीय id को ऐसे href से जोड़ता है जो # से शुरू होता है।

पेज-भीतर बुकमार्क क्या है

Fragment पहचानकर्ता URL का वह भाग है जो # के बाद आता है। HTML में आप किसी तत्व को id देकर लैंडिंग स्थान बनाते हैं। फिर कोई भी लिंक जिसका href #that-id है, ब्राउज़र से पेज पर पहले मिलते हुए id तक स्क्रॉल करने को कहता है (या # से पहले नामित पेज पर, यदि आप पथ शामिल करते हैं)।

सीधा उत्तर

गंतव्य को एक id दें, उदाहरण <h2 id="pricing">।
href="#pricing" से लिंक करें।
# का अर्थ है «यह id ढूँढो»। पेज पर id अद्वितीय होने चाहिए। छोटे नाम बिना स्पेस के पसंद करें: pricing, न कि Our Pricing!!।

पेज पर विषय-सूची

लंबे पेज के ऊपर एक छोटी नेव शुरुआती डेमो का क्लासिक रूप है: ऊपर fragment लिंक, नीचे शीर्षकों पर मिलते हुए id, और एक वापसी लिंक।

पेज पर बुकमार्क

html

HTML Code

<nav>
<a href="#intro">Intro</a> |
<a href="#pricing">Pricing</a>
</nav>

<h2 id="intro">Intro</h2>
<p>Welcome to the guide.</p>

<h2 id="pricing">Pricing</h2>
<p>Simple plans for learners.</p>

<p><a href="#intro">Back to intro</a></p>

पेज पर नमूने को पढ़ना

#intro और #pricing fragment लिंक हैं, अलग फ़ाइलें नहीं
प्रत्येक शीर्षक का id # के बाद के fragment से मेल खाना चाहिए
नेव कहीं भी हो सकती है; लंबे कंटेंट के लिए पेज-शीर्ष TOC आम हैं
«Back to intro» दिखाता है कि बुकमार्क उसी दस्तावेज़ पर नीचे और ऊपर दोनों काम करते हैं

दूसरी पेज की सेक्शन से लिंक करना

आप सापेक्ष (या निरपेक्ष) पथ को fragment के साथ जोड़ सकते हैं। ब्राउज़र पेज लोड करता है, फिर id मौजूद होने पर वहाँ कूदता है।

पथ प्लस fragment

html

HTML Code

<p>
<a href="guide.html#pricing">Open pricing in the guide</a>
</p>

path#id कब उपयोग करें

उसी पेज पर कूद: #pricing पर्याप्त है
आपके प्रोजेक्ट की दूसरी HTML फ़ाइल: guide.html#pricing
भरोसेमंद बाहरी दस्तावेज़: पूर्ण URL जो #section-name पर खत्म हो जब वह साइट स्थिर id दिखाती हो
यदि गंतव्य पेज पर id गायब है, ब्राउज़र आमतौर पर पेज ऊपर खोलता है और अज्ञात fragment को नज़रअंदाज़ करता है।

Id नामकरण की आदतें

प्रति पेज एक id मान — कभी डुप्लिकेट न करें
संभव हो तो अक्षर से शुरू करें; स्पेस और अजीब विराम चिह्न से बचें
बहु-शब्द नामों के लिए हाइफ़न उपयोग करें: getting-started
नाम स्थिर रखें यदि अन्य पेज उन पर डीप-लिंक करेंगे
Id मशीनों और URL के लिए हैं; दृश्यमान शीर्षक टेक्स्ट मानव-अनुकूल रह सकता है और id स्ट्रिंग से अलग हो सकता है।

बुकमार्क बनाम ब्राउज़र «बुकमार्क»

लोग ब्राउज़र के फेवरिट मेनू में पेज सहेजने को भी «bookmark» कहते हैं। यह पाठ पेज-भीतर fragment लिंक का अर्थ लेता है। ब्राउज़र फेवरिट दस्तावेज़ URL उपयोग करते हैं (और कभी-कभी fragment यदि आपने कॉपी किया हो)। एक ही शब्द, अलग रोज़मर्रा के काम — दूसरों को सिखाते समय HTML अर्थ स्पष्ट रखें।

पहुँच और UX नोट्स

जंप लिंक कीबोर्ड और स्क्रीन-रीडर उपयोगकर्ताओं को लंबे पेजों में घूमने में मदद करते हैं जब गंतव्य वास्तविक लैंडमार्क हों (शीर्षक, सेक्शन)। दर्जनों खाली id न ठूँसें। कूद के बाद लक्ष्य दिखाई दे — स्टिकी हेडर बाद में CSS सीखने पर शीर्षक ढक सकते हैं; अभी जाँचें कि सही सेक्शन दिखाई दे।

अपने एडिटर में अभ्यास

अलग id मानों वाले दो शीर्षक बनाएँ।
उनके ऊपर href="#…" वाले fragment लिंक जोड़ें।
प्रत्येक लिंक पर क्लिक करें और पुष्टि करें कि पेज मिलते हुए शीर्षक पर कूदता है।
अपने पहले शीर्षक या शीर्ष लैंडमार्क के id की ओर «Back to top» लिंक जोड़ें।
दूसरी फ़ाइल से other.html#intro से लिंक करें और क्रॉस-पेज कूद की पुष्टि करें।
अस्थायी रूप से id डुप्लिकेट करें, भ्रम देखें, फिर अद्वितीयता ठीक करें।

आसान गलतियाँ

एक पेज पर वही id दो बार उपयोग करना
href में # भूलना ताकि ब्राउज़र फ़ाइलनाम खोजे
id में स्पेस या अजीब प्रतीक रखना
ऐसे id से लिंक करना जो मौजूद नहीं
Fragment बुकमार्क को target="_blank" से मिलाना (अलग काम)
बिना पथ के अकेले #pricing से दूसरी फ़ाइल खुलने की उम्मीद करना

सारांश

उसी पेज के बुकमार्क id प्लस href="#id" उपयोग करते हैं
Id अद्वितीय, छोटे और स्पेस-मुक्त होने चाहिए
लंबे पेजों और छोटी विषय-सूचियों के लिए बढ़िया
दूसरी पेज की सेक्शन में कूदने के लिए page.html#id उपयोग करें
गायब fragment आमतौर पर ऊपर रहकर चुपचाप विफल होते हैं

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓

प्रश्न

🎯

70%

पास करने के लिए

♾️

∞

समय

🔄

∞

प्रयास

📝 निर्देश

हर प्रश्न को ध्यान से पढ़ें
हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
आपकी प्रगति शीर्ष पर दिखाई जाएगी

भाषा