HTML (<a>) हाइपरलिंक एलिमेंट की मूल बातें सीखें जिसका उपयोग वेब पर इंटरैक्टिव लिंक्स को परिभाषित करने के लिए किया जाता है।
HTML में, <a> टैग का उपयोग लिंक/हाइपरलिंक एलिमेंट्स को परिभाषित करने के लिए किया जाता है:
<a>लिंक एलिमेंट</a>लिंक एलिमेंट को एंकर एलिमेंट भी कहा जाता है।
लिंक बनाम हाइपरलिंक:
- एक लिंक एक पता है जो इंटरनेट पर एक स्थान निर्दिष्ट करता है।
- एक हाइपरलिंक एक प्रकार का लिंक है जिस पर आप क्लिक करके कुछ सक्रिय कर सकते हैं या किसी गंतव्य पर जा सकते हैं, जैसे वेबसाइट।
बातचीत में, अधिकांश लोग "हाइपरलिंक" और "लिंक" का परस्पर उपयोग करते हैं।
'a' एलिमेंट का उपयोग कैसे करें
<a> एलिमेंट कई एट्रिब्यूट्स लेता है, जिसमें सबसे महत्वपूर्ण href एट्रिब्यूट है, जिसका उपयोग लिंक (URL) गंतव्य प्रदान करने के लिए किया जाता है जब यूजर्स उस पर क्लिक करते हैं।
यहाँ एक लिंक का उदाहरण है जो आपको क्लिक करने पर TechStacker के फ्रंट पेज पर निर्देशित करता है:
<a href="https://techstacker.com">TechStacker के फ्रंट पेज पर जाएं।</a>उपरोक्त लिंक में ये बिल्डिंग ब्लॉक्स हैं:
- ओपनिंग लिंक टैग
<a> - एट्रिब्यूट नाम:
href - एट्रिब्यूट वैल्यू:
"https://techstacker.com"(लिंक URL/गंतव्य) - लिंक टेक्स्ट
TechStacker के फ्रंट पेज पर जाएं।(यूजर को दिखाई देता है) - क्लोजिंग लिंक टैग
</a>
उपरोक्त लिंक वास्तविक जीवन में कैसा दिखता है:
TechStacker के फ्रंट पेज पर जाएं।
एब्सोल्यूट बनाम रिलेटिव URLs
एट्रिब्यूट वैल्यू (लिंक/URL गंतव्य) या तो एक एब्सोल्यूट या एक रिलेटिव URL पथ हो सकता है। पहले का उदाहरण एक एब्सोल्यूट URL है:
<a href="https://techstacker.com">TechStacker के फ्रंट पेज पर जाएं।</a>यह एक रिलेटिव URL है जो इस वेबसाइट पर एक आर्टिकल की ओर ले जाता है:
<a href="/html-tags-vs-html-elements-difference">HTML टैग्स बनाम HTML एलिमेंट्स।</a>उसी आर्टिकल का एक एब्सोल्यूट URL यहाँ है:
<a href="https://techstacker.com/html-tags-vs-html-elements-difference">HTML टैग्स बनाम HTML एलिमेंट्स।</a>ध्यान दें कि एब्सोल्यूट URL में रिलेटिव URL से बहुत अधिक जानकारी होती है:
- इसमें एक प्रोटोकॉल है (
https) - एक डोमेन नाम
techstacker.com - एक स्लग
/html-tags-vs-html-elements-difference
रिलेटिव URL में केवल स्लग होता है।
तो आप किसका उपयोग कब करते हैं?
- अपनी खुद की वेबसाइट पर कंटेंट से लिंक करते समय रिलेटिव URLs का उपयोग करें।
- अन्य वेबसाइट्स पर कंटेंट से लिंक करते समय एब्सोल्यूट URLs का उपयोग करें।
आप केवल उसी सर्वर पर संग्रहीत कंटेंट को संदर्भित करने के लिए रिलेटिव URLs का उपयोग कर सकते हैं जिसमें आपकी वेबसाइट है। अन्यथा, एब्सोल्यूट URLs का उपयोग करें।
यदि आप HTML टैग्स और HTML एलिमेंट्स के बीच अंतर के बारे में भ्रमित हैं, तो आप HTML टैग्स बनाम HTML एलिमेंट्स के बारे में वह आर्टिकल पढ़ना चाह सकते हैं।
ठीक है, एक और एट्रिब्यूट है जो आमतौर पर उपयोग किया जाता है और जानना महत्वपूर्ण है, खासकर जब SEO की बात आती है।
टार्गेट एट्रिब्यूट
एक और उपयोगी लिंक एलिमेंट एट्रिब्यूट है target एट्रिब्यूट, जो निर्दिष्ट करता है कि जब यूजर्स उस पर क्लिक करते हैं तो लिंक कहाँ खुलना चाहिए।
यदि आप इस लिंक पर क्लिक करते हैं:
<a href="https://techstacker.com/">फ्रंट पेज का लिंक</a>आपको TechStacker के फ्रंट पेज पर उसी ब्राउज़र टैब/विंडो में ले जाया जाएगा जिसमें आप अभी हैं। इसका मतलब है कि यदि आप किसी अन्य वेबसाइट से लिंक करते हैं, तो यूजर आपकी वेबसाइट से दूर चला जाएगा, और उस वेबसाइट पर चला जाएगा जिससे आप लिंक करते हैं (जो आप चाहें या नहीं)।
ऐसा इसलिए होता है क्योंकि डिफ़ॉल्ट रूप से <a> एलिमेंट्स में target एट्रिब्यूट होता है जिसका मान _self होता है — जिसका अर्थ है कि यह लिंक को उसी विंडो में खोलता है जिसमें यूजर है।
तो यह लिंक एलिमेंट:
<a href="https://techstacker.com/"></a>कंप्यूटर/ब्राउज़र द्वारा इस तरह पढ़ा जाता है:
<a href="https://techstacker.com/" target="_self"></a>जो भ्रमित करने वाला हो सकता है, क्योंकि आप इसे देख नहीं सकते (लेकिन अब आप जानते हैं)।
यदि आप चाहते हैं कि आपके लिंक नए ब्राउज़र टैब में खुलें, तो आप डिफ़ॉल्ट _self मान को _blank मान से ओवरराइड कर सकते हैं:
<a href="https://youtube.com" target="_blank" rel="noopener">यदि आप इस पर क्लिक करते हैं, तो YouTube वेबसाइट एक नए टैब में खुलती है</a>किसका उपयोग कब करें?
सरल उत्तर है: यदि आप यूजर्स को अपनी वेबसाइट से दूर नहीं ले जाना चाहते हैं, उदाहरण के लिए SEO उद्देश्यों के लिए, तो target="_blank" का उपयोग करें।
अन्यथा, कुछ न करें, और आपके लिंक डिफ़ॉल्ट रूप से उसी ब्राउज़र विंडो में खुलेंगे (_self मान के माध्यम से)।
हेडिंग्स को लिंक्स के रूप में उपयोग करना
कई HTML एलिमेंट्स को लिंक्स के रूप में उपयोग किया जा सकता है, जिसमें हेडिंग्स भी शामिल हैं। वास्तव में यह बहुत आम है। आपको बस उस एलिमेंट को लिंक टैग्स <a></a> के अंदर लपेटना होगा जिसे आप लिंक बनाना चाहते हैं:
<a href="/html-for-beginners"> <h3>HTML फॉर बिगिनर्स</h3> </a>इमेजेज को लिंक्स के रूप में उपयोग करना
लिंक एलिमेंट्स इमेजेज को लिंक्स भी बना सकते हैं, उदाहरण के लिए थंबनेल या आर्टिकल या प्रोडक्ट पेज के लिए। ऐसा करने के लिए आप बस अपने इमेज एलिमेंट <img> को लिंक एलिमेंट <a></a> के अंदर लपेटते हैं, जैसे:
<a href="/tags/html"> <img src="../../thumbnails/html.png" /> </a>उपरोक्त उदाहरण यूजर को इस HTML आर्टिकल सेक्शन पर ले जाएगा जब वे इमेज पर क्लिक करेंगे।
यह वास्तविक जीवन में कैसा दिखता है (इस पर क्लिक करने का प्रयास करें):
