HTML लिंक शीर्षक और लक्ष्य
Links सत्र ने आपको स्पष्ट href मानों वाले काम करने वाले a तत्व दिए। दो आम अतिरिक्त चीज़ें href को बदले बिना अनुभव बदलती हैं: संक्षिप्त होवर संकेत के लिए title विशेषता, और एक target जो गंतव्य को नए ब्राउज़र टैब में खोल सकता है। सावधानी से इस्तेमाल करने पर ये मदद करते हैं। हर मेनू आइटम पर लगाने पर ये लोगों को परेशान करते हैं और सुरक्षा के जोखिम बनाते हैं।
ये विशेषताएँ क्या करती हैं
href अभी भी तय करता है कि लिंक कहाँ जाता है। title, target, और rel संकेतों और कैसे ब्राउज़र उस गंतव्य को खोलता है, इसे समायोजित करते हैं। इन्हें ठोस लिंक टेक्स्ट के ऊपर वैकल्पिक उपकरणों के रूप में सीखें — वर्णनात्मक शब्दों के विकल्प के रूप में नहीं।
सीधा उत्तर
title="…"— होवर पर वैकल्पिक सलाहकार टूलटिप टेक्स्ट (समर्थन और उपयोगिता अलग-अलग होती है; अकेले इस पर निर्भर न रहें)target="_blank"— नए टैब या विंडो में खोलें_blankके साथrel="noopener noreferrer"भी सेट करें ताकि नया पेजwindow.openerके ज़रिए आपके मूल टैब पर पूरा नियंत्रण न ले सके (रोज़मर्रा का सुरक्षित पैटर्न)
साइट-भीतर नेविगेशन डिफ़ॉल्ट रूप से उसी टैब में रखें।_blankउन मामलों के लिए आरक्षित रखें जहाँ आपके पेज पर बने रहना सच में मदद करता है — अक्सर बाहरी संदर्भ या डाउनलोड।
title, target, और rel एक नज़र में
📊 लिंक अतिरिक्त की तुलना
| विशेषता | काम |
|---|---|
| title | छोटा होवर संकेत (अतिरिक्त संदर्भ) |
| target | गंतव्य कहाँ खुलता है (_blank = नया टैब/विंडो) |
| rel | संबंध टोकन; _blank के साथ noopener noreferrer उपयोग करें |
| href | अभी भी गंतव्य URL (अपरिवर्तित) |
एक सहायक title टूलटिप
title तब उपयोग करें जब छोटा अतिरिक्त संकेत दृश्यमान लिंक टेक्स्ट से आगे मूल्य जोड़ता है। दोनों जगहों पर ठीक वही वाक्य चिपकाकर स्पष्टता दोगुनी करने की उम्मीद न करें — स्क्रीन रीडर और होवर अनुभव अलग होते हैं, और खाली दोहराव ध्यान बर्बाद करता है।
title टूलटिप वाला लिंक
html<a href="guide.html" title="Opens the beginner guide">Beginner guide</a>
title नमूने को पढ़ना
- दृश्यमान टेक्स्ट
Beginner guideप्राथमिक लेबल बना रहता है titleकई डेस्कटॉप ब्राउज़र में होवर पर संक्षिप्त सलाहकार स्ट्रिंग जोड़ता है- मोबाइल और सहायक तकनीक
titleको उसी तरह उजागर नहीं कर सकती — दृश्यमान टेक्स्ट मज़बूत रखें hrefअभी भीguide.htmlकी ओर इशारा करता है; title स्वयं नेविगेट नहीं करता
सुरक्षिततर rel के साथ नया टैब
बाहरी साइट को नए टैब में खोलना पाठकों को आपका पाठ खुला रखने देता है। उन मामलों के लिए डिफ़ॉल्ट सुरक्षित आदत के रूप में _blank को rel="noopener noreferrer" से जोड़ें।
सुरक्षिततर rel के साथ नया टैब
html<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
Example (new tab)
</a>
noopener और noreferrer क्यों
noopenerइस जोखिम को कम करता है कि नया पेजwindow.openerके ज़रिए आपके मूल टैब को नियंत्रित करेnoreferrerकई ब्राउज़र में रेफ़रर भेजने से भी बचाता है (गोपनीयता का साइड प्रभाव; फिर भी इस पैटर्न के साथ आम तौर पर सिखाया जाता है)
इस कोर्स में गहरी ब्राउज़र-सुरक्षा सिद्धांत की ज़रूरत नहीं —_blankबाहरी लिंक के लिए युग्मित विशेषताओं को याद रखें और आगे बढ़ें।
सब कुछ blank न करें
नए टैब बढ़ते जाते हैं। अगर हर साइडबार लिंक _blank खोलता है, तो उपयोगकर्ता सरल Back बटन की कहानी खो देते हैं और टैबों का ढेर पाते हैं। अपने ही पेजों (about.html, अगला पाठ, होम) के लिए उसी-टैब लिंक पसंद करें। _blank तब उपयोग करें जब आप अपनी साइट छोड़ रहे हों या जब उत्पाद की आवश्यकता स्पष्ट रूप से माँग करे।
title पेज का title नहीं है
head में दस्तावेज़ का <title> पूरे टैब को लेबल करता है। a पर title विशेषता केवल उस लिंक पर एक संकेत है। अलग काम, समान अंग्रेज़ी शब्द — इन्हें भ्रमित न करें।
अपने एडिटर में अभ्यास
- स्पष्ट दृश्यमान टेक्स्ट और एक सहायक
titleके साथ एक स्थानीय लिंक जोड़ें जो एक अतिरिक्त विवरण जोड़ता है। target="_blank"औरrel="noopener noreferrer"के साथ एक बाहरी लिंक जोड़ें।- टूलटिप देखने के लिए (डेस्कटॉप पर) होवर करें; नया टैब पुष्टि करने के लिए क्लिक करें।
- बिना
_blankके तीसरा इन-साइट लिंक रखें और पुष्टि करें कि यह वर्तमान टैब को सामान्य रूप से बदलता है। - किसी भी ऐसे
titleको फिर लिखें जो केवल लिंक टेक्स्ट दोहराता है और कोई नई जानकारी नहीं देता।
आसान गलतियाँ
- हर आंतरिक मेनू आइटम पर
_blankलगाना _blankबाहरी लिंक परrel="noopener noreferrer"भूलना- बेकार
titleलिखना जो केवल लिंक टेक्स्ट की गूँज हो - सोचना कि
titleयाtargetगायबhrefकी जगह ले सकते हैं - लिंक की
titleविशेषता को दस्तावेज़<title>तत्व से भ्रमित करना
सारांश
titleछोटा होवर संकेत जोड़ सकता है; दृश्यमान लिंक टेक्स्ट प्राथमिक रहता हैtarget="_blank"नया टैब या विंडो खोलता है- सुरक्षिततर बाहरी लिंक के लिए
_blankकोrel="noopener noreferrer"के साथ जोड़ें - अपने पेजों के लिए उसी-टैब नेविगेशन पसंद करें
hrefगंतव्य बना रहता है; ये विशेषताएँ केवल अनुभव को परिष्कृत करती हैं
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी