HTML पेज में पेज लिंक्स कैसे बनाएं?

परिचय

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

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

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

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

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

उदाहरण

<!DOCTYPE html> <html> 
    <head> 
        <title>HTML Links</title> 
    </head> 
    <body> 
        <h1>हमसे यहाँ संपर्क करें</h1> 
        <a href="https://www.tutorialspoint.com/about/contact_us.htm">संपर्क करें</a> 
    </body> 
</html>

आउटपुट

HTML पेज में पेज लिंक्स कैसे बनाएं?

एट्रिब्यूट्स और उनके उपयोग

एट्रिब्यूट	विवरण	उदाहरण
`href`	लिंक का गंतव्य URL	`href="https://example.com"`
`target`	कहाँ खोलें: `_blank` (नया टैब), `_self` (डिफ़ॉल्ट), `_parent`, `_top`	`target="_blank"`
`rel`	लिंक और लक्ष्य के बीच संबंध	`rel="noopener noreferrer"` (सुरक्षा के लिए _blank के साथ)
`title`	होवर पर टूलटिप टेक्स्ट	`title="हमारी साइट पर जाएं"`
`download`	नेविगेट करने के बजाय डाउनलोड करने के लिए संकेत देता है	`download="filename.pdf"`
`hreflang`	लिंक किए गए दस्तावेज़ की भाषा	`hreflang="hi"`

लिंक के प्रकार

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

<a href="https://www.example.com/page.html">बाहरी लिंक</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>
...
<h2 id="section1">सेक्शन 1</h2>

4. ईमेल लिंक

<a href="mailto:email@example.com?subject=विषय&body=संदेश">ईमेल भेजें</a>

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

<a href="tel:+91-9876543210">हमें कॉल करें</a>

6. WhatsApp लिंक

<a href="https://wa.me/919876543210?text=नमस्ते">WhatsApp पर चैट करें</a>

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

विवरणात्मक लिंक टेक्स्ट उपयोग करें - "यहाँ क्लिक करें" के बजाय "हमारी सेवाएँ देखें"
बाहरी लिंक्स के लिए rel="noopener noreferrer" उपयोग करें - सुरक्षा के लिए
कीबोर्ड एक्सेसिबल बनाएं - फोकस स्टाइल्स स्पष्ट रखें
टूटे लिंक्स नियमित रूप से जांचें
रिलेटिव URLs प्राथमिकता दें - आंतरिक नेविगेशन के लिए

एक्सेसिबिलिटी टिप्स

स्क्रीन रीडर्स के लिए aria-label उपयोग करें अगर लिंक टेक्स्ट पर्याप्त नहीं है
रंग के अलावा अन्य विज़ुअल संकेतक (अंडरलाइन, बोल्ड) प्रदान करें
फोकस स्टेट स्पष्ट रूप से दिखाई देना चाहिए