HTML पेज में हाइपरलिंक कैसे इन्सर्ट करें?

परिचय

HTML के साथ, आसानी से किसी भी HTML पेज पर हाइपरलिंक्स जोड़ें। टीम पेज, हमारे बारे में पेज, या यहां तक कि एक टेस्ट को हाइपरलिंक बनाकर लिंक करें। आप किसी बाहरी वेबसाइट के लिए भी हाइपरलिंक बना सकते हैं। HTML पेज में हाइपरलिंक बनाने के लिए, <a> और </a> टैग्स का उपयोग करें, जो लिंक्स को परिभाषित करने के लिए उपयोग किए जाने वाले टैग्स हैं।

कैसे काम करता है

• <a> टैग इंगित करता है कि हाइपरलिंक कहाँ शुरू होता है
• </a> टैग इंगित करता है कि हाइपरलिंक कहाँ समाप्त होता है
• इन टैग्स के अंदर जो भी टेक्स्ट जोड़ा जाता है, वह हाइपरलिंक के रूप में काम करेगा
• लिंक के लिए URL को <a href=""> में जोड़ें

महत्वपूर्ण नोट

<a>...</a> टैग्स को <body>...</body> टैग्स के अंदर उपयोग करना चाहिए।

उदाहरण

<!DOCTYPE html> <html> 
    <head> 
        <title>HTML Hyperlinks</title> 
    </head> 
    <body> 
        <h1>कंपनी</h1> 
        <p> 
            हम <a href="/about/about_team.htm">पेशेवरों की टीम</a> हैं जो 
            मुफ्त शिक्षण सामग्री प्रदान करने के लिए कड़ी मेहनत कर रहे हैं। 
        </p> 
    </body> 
</html>

आउटपुट

हाइपरलिंक के प्रकार और उदाहरण

1. बाहरी लिंक (एब्सोल्यूट URL)

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">बाहरी साइट</a>

2. आंतरिक लिंक (रिलेटिव URL)

<a href="/about.html">हमारे बारे में</a>
<a href="contact.html">संपर्क</a>
<a href="../parent/page.html">पैरेंट डायरेक्टरी</a>

3. एंकर लिंक (पेज के अंदर)

<a href="#section1">सेक्शन 1 पर जाएं</a>
...
<section id="section1"><h2>सेक्शन 1</h2></section>

4. ईमेल लिंक

<a href="mailto:contact@example.com?subject=पूछताछ&body=नमस्ते,">ईमेल भेजें</a>

5. फोन लिंक (मोबाइल)

<a href="tel:+91-98765-43210">कॉल करें: +91-98765-43210</a>

6. WhatsApp लिंक

<a href="https://wa.me/919876543210?text=नमस्ते%20मदद%20चाहिए">WhatsApp पर चैट</a>

7. SMS लिंक

<a href="sms:+919876543210?body=हैलो">SMS भेजें</a>

8. फाइल डाउनलोड

<a href="document.pdf" download="मेरा-दस्तावेज.pdf">PDF डाउनलोड</a>

9. इमेज लिंक

<a href="https://example.com">
    <img src="banner.jpg" alt="बैनर विवरण" width="300">
</a>

महत्वपूर्ण एट्रिब्यूट्स

सुरक्षा: target="_blank" के साथ rel

<!-- हमेशा noopener noreferrer जोड़ें -->
<a href="https://external.com" target="_blank" rel="noopener noreferrer">बाहरी लिंक</a>

<!-- कारण: नए टैब को window.opener एक्सेस से रोकता है -->

एक्सेसिबिलिटी सर्वोत्तम अभ्यास

1. विवरणात्मक लिंक टेक्स्ट - "यहाँ क्लिक करें" ❌ → "हमारी सेवाएँ देखें" ✅
2. संदर्भ से बाहर भी समझ में आए - स्क्रीन रीडर्स लिंक्स सूचीबद्ध करते हैं
3. फोकस स्टेट विज़िबल - :focus { outline: 2px solid #3498db; }
4. बाहरी लिंक्स इंगित करें - आइकन या टेक्स्ट "(नई विंडो में खुलता है)"
5. रंग के अलावा अन्य संकेतक - अंडरलाइन, बोल्ड, आइकन

CSS स्टाइलिंग

<style>
    a { color: #3498db; text-decoration: none; transition: color 0.2s; }
    a:hover { color: #2980b9; text-decoration: underline; }
    a:focus { outline: 2px solid #3498db; outline-offset: 2px; border-radius: 2px; }
    a:visited { color: #8e44ad; }
    a.external::after { content: " ↗"; font-size: 0.8em; }
</style>