HTML कैसे (<a> .) की मूल बातें जानें ) हाइपरलिंक तत्व का उपयोग वेब पर इंटरेक्टिव लिंक को परिभाषित करने के लिए किया जाता है।
HTML में, <a> टैग का उपयोग लिंक/हाइपरलिंक तत्वों को परिभाषित करने के लिए किया जाता है:
<a>Link element</a>लिंक तत्व को एंकर . भी कहा जाता है तत्व।
लिंक बनाम हाइपरलिंक:
- एक लिंक एक पता है जो इंटरनेट पर एक स्थान निर्दिष्ट करता है।
- एक हाइपरलिंक एक लिंक का प्रकार है कि आप कुछ सक्रिय करने के लिए क्लिक कर सकते हैं या किसी वेबसाइट जैसे गंतव्य पर जा सकते हैं।
बातचीत में, ज्यादातर लोग "हाइपरलिंक" और "लिंक" एक दूसरे के स्थान पर कहते हैं।
'a' element का उपयोग कैसे करें
<a> तत्व में कई विशेषताएँ होती हैं, जिनमें सबसे महत्वपूर्ण है href विशेषता, जिसका उपयोग उपयोगकर्ता द्वारा उस पर क्लिक करने पर लिंक (यूआरएल) गंतव्य प्रदान करने के लिए किया जाता है।
यहां एक लिंक का उदाहरण दिया गया है जो आपको टेकस्टैकर के सामने वाले पृष्ठ पर ले जाता है जब आप उस पर क्लिक करते हैं:
<a href="https://techstacker.com">Go to TechStacker’s front page.</a>ऊपर दिए गए लिंक में ये बिल्डिंग ब्लॉक्स हैं:
- लिंक टैग खोलना
<a> - विशेषता का नाम:
href - विशेषता मान:
"https://techstacker.com"(लिंक यूआरएल/गंतव्य) - लिंक टेक्स्ट
Go to TechStacker’s front page.(उपयोगकर्ता के लिए दृश्यमान) - क्लोजिंग लिंक टैग
</a>
वास्तविक जीवन में उपरोक्त लिंक कैसा दिखता है:
टेकस्टैकर के फ्रंट पेज पर जाएं।
निरपेक्ष बनाम सापेक्ष URL
विशेषता मान (लिंक/यूआरएल गंतव्य) या तो पूर्ण . हो सकता है या एक रिश्तेदार यूआरएल पथ। पहले का उदाहरण एक संपूर्ण URL है:
<a href="https://techstacker.com">Go to TechStacker’s front page.</a>यह एक सापेक्ष URL है जो इस वेबसाइट पर एक लेख की ओर ले जाता है:
<a href="/html-tags-vs-html-elements-difference"
>HTML Tags vs. HTML Elements.</a
>यहां उसी लेख का संपूर्ण URL दिया गया है:
<a href="https://techstacker.com/html-tags-vs-html-elements-difference"
>HTML Tags vs. HTML Elements.</a
>ध्यान दें कि कैसे पूर्ण URL संबंधित URL की तुलना में बहुत अधिक जानकारी है:
- इसका एक प्रोटोकॉल है (
https) - एक डोमेन नाम
techstacker.com - एक स्लग
/html-tags-vs-html-elements-difference
संबंधित URL में केवल स्लग होता है।
तो आप किसका उपयोग कब करते हैं?
- सापेक्ष URL का उपयोग करें जब आप अपनी वेबसाइट पर सामग्री से लिंक करते हैं।
- पूर्ण URL का उपयोग करें जब आप अन्य वेबसाइटों की सामग्री से लिंक करते हैं।
आप केवल उस सामग्री को संदर्भित करने के लिए सापेक्ष URL का उपयोग कर सकते हैं जो उसी सर्वर . पर रहती है (संग्रहीत है) जिसमें आपकी वेबसाइट है। अन्यथा, संपूर्ण URL का उपयोग करें।
यदि आप HTML टैग और HTML तत्वों के बीच अंतर के बारे में भ्रमित हैं, तो आप HTML टैग बनाम HTML तत्वों के बारे में उस लेख को पढ़ना चाह सकते हैं।
ठीक है, एक और विशेषता है जो आमतौर पर उपयोग की जाती है और जानना महत्वपूर्ण है, खासकर जब एसईओ की बात आती है।
लक्ष्य विशेषता
एक अन्य उपयोगी लिंक तत्व विशेषता है, target विशेषता, जो निर्दिष्ट करती है कि जब उपयोगकर्ता उस पर क्लिक करते हैं तो लिंक को कहां खोलना है।
अगर आप इस लिंक पर क्लिक करते हैं:
<a href="https://techstacker.com/">Link to front page</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"
>If you click this, the YouTube website opens in a new tab</a
>कब उपयोग करें?
इसका सरल उत्तर है:यदि आप उपयोगकर्ताओं को अपनी वेबसाइट से दूर नहीं ले जाना चाहते हैं, उदा. SEO उद्देश्यों के लिए, फिर target="_blank" . का उपयोग करें ।
अन्यथा, कुछ भी न करें, और आपके लिंक डिफ़ॉल्ट रूप से उसी ब्राउज़र विंडो में खुलेंगे (_self के माध्यम से) मूल्य)।
शीर्षकों को लिंक के रूप में उपयोग करना
शीर्षकों सहित कई HTML तत्वों को लिंक के रूप में उपयोग किया जा सकता है। वास्तव में यह बहुत आम है। आपको बस इतना करना है कि आप जिस तत्व को बनाना चाहते हैं उसे लिंक टैग <a></a> के अंदर एक लिंक में लपेटना है। :
<a href="/html-for-beginners">
<h3>HTML for Beginners</h3>
</a>छवियों को लिंक के रूप में उपयोग करना
लिंक तत्व छवियों को लिंक में भी बना सकते हैं, उदा। थंबनेल या लेख या उत्पाद पृष्ठों के लिए। ऐसा करने के लिए आप अपने छवि तत्व को सरलता से लपेटते हैं<img > लिंक तत्व के अंदर <a></a> , इस तरह:
<a href="/tags/html">
<img src="../../thumbnails/html.png" />
</a>ऊपर दिया गया उदाहरण उपयोगकर्ता को इस HTML लेख अनुभाग में ले जाएगा जब वे छवि पर क्लिक करेंगे।
वास्तविक जीवन में यह कैसा दिखता है (इस पर क्लिक करके देखें):
