HTML Links: a Tag, href, नया टैब और ईमेल लिंक
3 मिनट पढ़ें · मुफ़्त · बिना लॉगिन
Links ही web को web बनाते हैं। <a> tag (anchor का छोटा रूप) link बनाता है, और href attribute बताता है कि वह कहाँ जाता है। Tags के बीच का text वह है जिस पर visitor click करता है।
Links के प्रकार
- External link — दूसरी वेबसाइट पर:
<a href="https://kamaldnp.com">KAMALDNP</a>। हमेशा पूरा पता लिखें,https://से शुरू करके। - Internal link — अपनी ही साइट के दूसरे पेज पर:
<a href="about.html">About Us</a>। Relative path इस्तेमाल करें, domain की ज़रूरत नहीं। - किसी section का link — उसी पेज के किसी element पर, जिसकी id हो:
<a href="#contact">Jump to Contact</a>। - Email link — visitor का email app खोलता है:
<a href="mailto:support@kamaldnp.com">Email Us</a>। - Phone link — mobile पर call शुरू करता है:
<a href="tel:+918318013442">Call Us</a>।
Link को नए tab में खोलना
target="_blank" जोड़ें और सुरक्षा के लिए rel="noopener" भी: <a href="https://example.com" target="_blank" rel="noopener">Open in new tab</a>। इसे external links के लिए इस्तेमाल करें, ताकि visitor आपकी साइट न छोड़े। अपनी ही साइट के links के लिए उन्हें उसी tab में खुलने दें।
Link का text मायने रखता है
ऐसा link text लिखें जो मंज़िल को बताए: "Download the BTEUP syllabus" अच्छा है; "click here" खराब है। Google link text पढ़कर समझता है कि जुड़ा हुआ पेज किस बारे में है, और screen-reader उपयोगकर्ता अक्सर आसपास के शब्द पढ़े बिना एक link से दूसरे link पर जाते हैं।
<img> tag को <a> tags के बीच रख दें।Link क्या होता है
Link, या anchor, <a> tag से बनता है। यह text (या तस्वीर) को clickable बना देता है। href attribute में मंज़िल होती है। href के बिना <a> tag सिर्फ सादा text है — वह link जैसा दिखता है लेकिन कुछ करता नहीं।
याद रखने की तरकीब: a का मतलब anchor (लंगर), href का मतलब पता — link वहीं जाता है जहाँ href बताता है।
Link के attributes
| Attribute | मान | विवरण |
|---|---|---|
href | a web address or path | Link कहाँ जाता है। ज़रूरी है। |
target | _blank, _self | _blank नया tab खोलता है; _self default है, वही tab। |
title | text | छोटा tooltip, जो link पर hover करने पर दिखता है। |
download | file name (optional) | खोलने के बजाय target को download करता है। |
rel | noopener | सुरक्षा setting — target="_blank" के साथ इस्तेमाल करें। |
Links कई चीज़ों की ओर इशारा कर सकते हैं। चार आम तरह यहाँ दिए गए हैं:
<a href="https://kamaldnp.com">Our website</a> <a href="about.html">About page</a> <a href="#contact">Jump to the contact section</a> <a href="mailto:support@kamaldnp.com">Email us</a>
target="_blank" के साथ नए tab में खुलता है, तो हमेशा rel="noopener" जोड़ें। उसके बिना नया पेज JavaScript से वापस आकर आपके पेज को control कर सकता है — यह एक असली सुरक्षा जोखिम है।आम गलतियाँ
- बंद करने वाला
</a>भूल जाना — उसके बाद की हर चीज़ एक बड़ा link बन जाती है। - Link text के रूप में "click here" इस्तेमाल करना — मंज़िल को बताएँ।
- हर link को नए tab में खोलना — सिर्फ external links को आमतौर पर
_blankमिलता है। - गलत file नाम वाले पेज को link करना — ज़्यादातर servers पर HTML file names case-sensitive होते हैं।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>Links</title>
</head>
<body>
<a href="https://kamaldnp.com">KAMALDNP Academy</a><br>
<a href="about.html">About Us</a><br>
<a href="#contact">Jump to Contact</a><br>
<a href="mailto:support@kamaldnp.com">Email Us</a>
<h2 id="contact">Contact</h2>
<p>Reach us any time.</p>
</body>
</html>परिणाम
खुद करके देखें — लाइव एडिटर
नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।
संबंधित पाठ
अक्सर पूछे जाने वाले सवाल
इस पाठ के बारे में सबसे ज़्यादा पूछे जाने वाले सवाल — सवाल पढ़ें, फिर खोलकर जवाब देखें।
1. HTML में लिंक कैसे बनाते हैं?
a टैग और href एट्रिब्यूट का इस्तेमाल करें; टैग के बीच का टेक्स्ट ही क्लिक करने योग्य होता है।
2. बाहरी और आंतरिक लिंक में क्या अंतर है?
बाहरी लिंक में https से शुरू होने वाला पूरा पता होता है, जबकि आंतरिक लिंक में अपनी साइट के दूसरे पेज का छोटा रिलेटिव पाथ होता है।
3. लिंक को नए टैब में सुरक्षित तरीके से कैसे खोलें?
target blank और rel noopener जोड़ें; बाहरी लिंक के लिए ही इसका इस्तेमाल करें ताकि विज़िटर आपकी साइट न छोड़े।
खुद क्यों सीखें — AI से पूछने के बजाय?
AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।
सर्टिफिकेट पाएँ — सिर्फ ₹10
सभी 35 पाठ पूरे करें, टेस्ट पास करें (80%), ₹10 दें और अपना सर्टिफिकेट पाएँ।
टेस्ट देंदेखकर सीखना पसंद है? वीडियो कोर्स में वही विषय एक-एक करके सिखाए जाते हैं।
Go further with a full course
Free tutorials teach you the basics. Our paid courses add live projects, mentorship and a certificate.
Browse all courses
