HTML Links
HTML में Links (Hyperlinks) का इस्तेमाल एक पेज से दूसरे पेज या वेबसाइट पर जाने के लिए किया जाता है। इसी की वजह से Internet को “Web (जाल)” कहा जाता है — क्योंकि ये सारे पेज एक-दूसरे से जुड़े रहते हैं।
HTML Link क्या होता है?
HTML Link <a> (anchor) टैग से बनाया जाता है। इसमें href attribute का इस्तेमाल किया जाता है जो बताता है कि लिंक कहाँ जाना है।
Syntax:
<a href="URL">Link Text</a>“URL” = वह पता जहाँ क्लिक करने पर यूज़र जाएगा। “Link Text” = जो टेक्स्ट यूज़र को दिखाई देगा।
Example 1: Simple Link
<a href="https://www.google.com">Google पर जाएं</a>Output:
जब यूज़र इस लिंक पर क्लिक करेगा, वह Google की वेबसाइट पर पहुंच जाएगा।
Example 2: Link को नए Tab में खोलना
अगर आप चाहते हैं कि लिंक नए टैब में खुले, तो target="_blank" attribute लगाएं।
<a href="https://www.wikipedia.org" target="_blank">Wikipedia (New Tab)</a>हमेशा target="_blank" के साथ rel="noopener noreferrer" जोड़ें, यह सुरक्षा के लिए अच्छा है।
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Example Site</a>Example 3: Internal Links (अपने पेज के अंदर)
अगर आपकी वेबसाइट के अंदर कई पेज हैं, तो आप “internal linking” से उन्हें जोड़ सकते हैं।
<a href="about.html">About Us</a> <a href="contact.html">Contact Us</a>ऊपर के लिंक आपकी वेबसाइट के अंदर वाले पेज से जुड़ेंगे।
Example 4: Same Page Link (Anchor Link)
अगर आप एक ही पेज के किसी हिस्से पर जाना चाहते हैं (जैसे “Go to Top”), तो Anchor Link का प्रयोग करते हैं।
<h2 id="top">यह पेज का शीर्षक है</h2> <p>बहुत सारा कंटेंट...</p> <a href="#top">ऊपर जाएं</a>यहाँ #top का मतलब है “id=top” वाले एलीमेंट पर जाना।
Example 5: Email Link बनाना (mailto)
अगर आप चाहते हैं कि क्लिक करते ही ईमेल एप्लिकेशन खुले, तो mailto: का प्रयोग करें।
<a href="mailto:help@mywebsite.com">हमें ईमेल करें</a>क्लिक करने पर यूज़र के डिफॉल्ट ईमेल ऐप में ईमेल खुल जाएगा।
Example 6: Phone Number Link (tel)
मोबाइल साइट्स में अक्सर “Call Now” बटन होता है। यह tel: attribute से बनता है।
<a href="tel:+919876543210">अभी कॉल करें 📞</a>Example 7: Button जैसा Link
कई बार हम Link को बटन की तरह दिखाना चाहते हैं। इसके लिए CSS का इस्तेमाल किया जाता है।
<a href="https://www.youtube.com" target="_blank" style=" display: inline-block; background-color: #ff0000; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px;"> YouTube देखें </a>Output :
HTML Link Attributes
| Attribute (एट्रीब्यूट) | काम (Function) |
|---|---|
| **href** | लिंक का URL (कहाँ जाना है) |
| **target** | लिंक कहाँ खुलेगा (\_blank, \_self) |
| **title** | लिंक पर Hover करने पर Tooltip दिखाता है |
| **rel** | Relationship (जैसे nofollow, noopener) |
Example:
<a href="https://w3schools.com" target="_blank" title="HTML सीखें"> W3Schools </a>Example 8: Navigation Menu (Multiple Links)
<nav style="background: #333; padding: 10px;"> <a href="index.html" style="color:white; margin:10px;">Home</a> <a href="about.html" style="color:white; margin:10px;">About</a> <a href="services.html" style="color:white; margin:10px;">Services</a> <a href="contact.html" style="color:white; margin:10px;">Contact</a> </nav>Output:
एक साधारण Navigation Bar जिसमें कई लिंक हैं।
Extra Tips:
- text-decoration: none; से लिंक के नीचे वाली लाइन हटाई जा सकती है।
- :hover pseudo-class से hover effect बना सकते हैं।
<style> a { color: blue; text-decoration: none; } a:hover { color: red; text-decoration: underline; } </style>Bonus Example: Page Navigation in One HTML File
<h2 id="home">Home Section</h2> <p>Welcome to our homepage!</p> <h2 id="about">About Section</h2> <p>हमारे बारे में कुछ जानकारी...</p> <a href="#home">Home पर जाएं</a> | <a href="#about">About पर जाएं</a>क्लिक करते ही पेज उसी हिस्से पर स्क्रोल हो जाएगा।