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

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
HTML Code
<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
HTML Code
<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 विशेषता केवल उस लिंक पर एक संकेत है। अलग काम, समान अंग्रेज़ी शब्द — इन्हें भ्रमित न करें।

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

  1. स्पष्ट दृश्यमान टेक्स्ट और एक सहायक title के साथ एक स्थानीय लिंक जोड़ें जो एक अतिरिक्त विवरण जोड़ता है।
  2. target="_blank" और rel="noopener noreferrer" के साथ एक बाहरी लिंक जोड़ें।
  3. टूलटिप देखने के लिए (डेस्कटॉप पर) होवर करें; नया टैब पुष्टि करने के लिए क्लिक करें।
  4. बिना _blank के तीसरा इन-साइट लिंक रखें और पुष्टि करें कि यह वर्तमान टैब को सामान्य रूप से बदलता है।
  5. किसी भी ऐसे title को फिर लिखें जो केवल लिंक टेक्स्ट दोहराता है और कोई नई जानकारी नहीं देता।

आसान गलतियाँ

  • हर आंतरिक मेनू आइटम पर _blank लगाना
  • _blank बाहरी लिंक पर rel="noopener noreferrer" भूलना
  • बेकार title लिखना जो केवल लिंक टेक्स्ट की गूँज हो
  • सोचना कि title या target गायब href की जगह ले सकते हैं
  • लिंक की title विशेषता को दस्तावेज़ <title> तत्व से भ्रमित करना

सारांश

  • title छोटा होवर संकेत जोड़ सकता है; दृश्यमान लिंक टेक्स्ट प्राथमिक रहता है
  • target="_blank" नया टैब या विंडो खोलता है
  • सुरक्षिततर बाहरी लिंक के लिए _blank को rel="noopener noreferrer" के साथ जोड़ें
  • अपने पेजों के लिए उसी-टैब नेविगेशन पसंद करें
  • href गंतव्य बना रहता है; ये विशेषताएँ केवल अनुभव को परिष्कृत करती हैं

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

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

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

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

❓
7
प्रश्न
🎯
70%
पास करने के लिए
♾️
∞
समय
🔄
∞
प्रयास

📝 निर्देश

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