परिचय

HTML पेज में href एट्रिब्यूट का उपयोग पेज के लिए URL निर्दिष्ट करने के लिए किया जाता है। यदि href एट्रिब्यूट मौजूद नहीं है, तो <a> टैग को हाइपरलिंक नहीं माना जाएगा।

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

href एट्रिब्यूट को <a> टैग के लिए एक एट्रिब्यूट के रूप में शामिल किया जाना चाहिए। इसे <body>...</body> टैग्स के अंदर उपयोग किया जाना चाहिए।

उदाहरण

<!DOCTYPE html> <html> 
    <head> 
        <title>HTML href attribute</title> 
    </head> 
    <body> 
        <h1>कंपनी के बारे में जानें</h1> 
        <a href="/about/index.htm">हमारे बारे में</a> 
        <a href="/about/about_team.htm">टीम</a> 
    </body> 
</html>

आउटपुट

href एट्रिब्यूट के मान और प्रकार

1. एब्सोल्यूट URL (पूर्ण URL)

<a href="https://www.example.com/page.html">पूर्ण URL</a>
<a href="https://example.com/path?query=value#fragment">क्वेरी और फ्रैगमेंट के साथ</a>

2. रिलेटिव URL (सापेक्ष URL)

<a href="/about.html">रूट-रिलेटिव (डोमेन रूट से)</a>
<a href="contact.html">समान डायरेक्टरी</a>
<a href="../parent.html">पैरेंट डायरेक्टरी</a>
<a href="./sibling.html">समान डायरेक्टरी (स्पष्ट)</a>

3. फ्रैगमेंट/एंकर लिंक (पेज के भीतर)

<a href="#section1">सेक्शन 1 पर जाएं</a>
<a href="/page.html#section2">दूसरे पेज के सेक्शन 2 पर</a>

4. विशेष प्रोटोकॉल्स

5. डाउनलोड एट्रिब्यूट के साथ

<a href="document.pdf" download="मेरा-दस्तावेज.pdf">PDF डाउनलोड करें</a>
<a href="data:text/csv;charset=utf-8,Name,Age\nJohn,25" download="data.csv">CSV डाउनलोड</a>

href के बिना <a> टैग

<!-- href के बिना - यह लिंक नहीं है, केवल प्लेसहोल्डर -->
<a>यह लिंक नहीं है (नहीं क्लिक करने योग्य)</a>

<!-- href="#" - पेज टॉप पर स्क्रॉल करता है (बचें) -->
<a href="#">टॉप पर जाएं</a>

<!-- बेहतर: वास्तविक एंकर उपयोग करें -->
<a href="#main-content">मुख्य कंटेंट पर जाएं</a>

JavaScript के साथ डायनामिक href

<a id="dynamic-link" href="#">लोड हो रहा है...</a>

<script>
    // डायनामिक रूप से href सेट करें
    document.getElementById('dynamic-link').href = 'https://api.example.com/redirect?user=123';
    
    // या इवेंट हैंडलर में
    document.getElementById('dynamic-link').addEventListener('click', function(e) {
        e.preventDefault();
        // लॉजिक यहां
        window.location.href = 'https://example.com/final';
    });
</script>

सर्वोत्तम अभ्यास

1. आंतरिक लिंक्स के लिए रिलेटिव URLs उपयोग करें - पोर्टेबिलिटी के लिए
2. बाहरी लिंक्स के लिए rel="noopener noreferrer" जोड़ें - target="_blank" के साथ
3. विवरणात्मक एंकर टेक्स्ट - "यहाँ क्लिक करें" के बजाय अर्थपूर्ण टेक्स्ट
4. href="#" से बचें - वास्तविक एंकर या बटन उपयोग करें
5. JavaScript के लिए बटन उपयोग करें - <button> अगर नेविगेशन नहीं है
6. कैनोनिकल URLs सुसंगत रखें - ट्रेलिंग स्लैश, WWW/नॉन-WWW