HTML Links को Hyperlinks भी कहा जाता है।
इनका उपयोग एक वेबपेज से दूसरे वेबपेज, उसी पेज के किसी हिस्से, किसी फाइल, ईमेल या फोन नंबर तक पहुँचने के लिए किया जाता है।
👉 बिना Links के इंटरनेट सिर्फ static text बनकर रह जाएगा।
HTML Link बनाने के लिए <a> Tag
HTML में Link बनाने के लिए <a> (anchor) tag का उपयोग किया जाता है।
Basic Syntax
<a href="https://www.example.com">Visit Example</a>
Explanation:
| Attribute | Description |
|---|---|
<a> | Anchor tag |
href | Destination URL (जहाँ जाना है) |
| Text | User को दिखने वाला clickable text |
Example: Simple HTML Link
<!DOCTYPE html>
<html>
<head>
<title>HTML Links</title>
</head>
<body>
<a href="https://www.google.com">Go to Google</a>
</body>
</html>
📌 User “Go to Google” पर क्लिक करेगा और Google खुल जाएगा।
href Attribute के प्रकार
1️⃣ Absolute URL (पूरी वेबसाइट का लिंक)
<a href="https://www.wikipedia.org">Wikipedia</a>
✔ किसी दूसरी वेबसाइट के लिए
2️⃣ Relative URL (उसी वेबसाइट के अंदर)
<a href="about.html">About Us</a>
✔ जब फाइल उसी फोल्डर या वेबसाइट में हो
3️⃣ Folder के अंदर फाइल
<a href="pages/contact.html">Contact Page</a>
Link को New Tab में खोलना (target Attribute)
Default:
Link उसी tab में खुलेगा।
New Tab के लिए:
<a href="https://www.youtube.com" target="_blank">
Open YouTube
</a>
target Values:
| Value | Meaning |
|---|---|
_self | Same tab (default) |
_blank | New tab |
_parent | Parent frame |
_top | Full window |
HTML Link को Button की तरह बनाना
<a href="signup.html" style="
padding:10px 20px;
background:blue;
color:white;
text-decoration:none;
border-radius:5px;">
Sign Up
</a>
📌 Real websites में links को buttons की तरह ही बनाया जाता है।
Image को Link बनाना
<a href="https://www.google.com">
<img src="logo.png" alt="Google Logo">
</a>
✔ Image पर क्लिक करने से link open होगा।
Email Link (mailto:)
<a href="mailto:support@example.com">
Email Us
</a>
📧 Click करते ही email app खुलेगा।
Phone Call Link (tel:)
<a href="tel:+919876543210">
Call Now
</a>
📱 Mobile devices पर direct call option खुलेगा।
Page के अंदर Jump Link (Bookmark Link)
Step 1: Target Element को ID दें
<h2 id="contact">Contact Section</h2>
Step 2: Link बनाएं
<a href="#contact">Go to Contact</a>
📌 Same page के अंदर scroll होगा।
Link Title Attribute (Hover Text)
<a href="https://example.com" title="Visit Example Website">
Example
</a>
🖱 Mouse hover करने पर tooltip दिखेगा।
HTML Links Styling (CSS से)
Default Link Colors
| State | Color |
|---|---|
| Normal | Blue |
| Visited | Purple |
| Hover | Underline |
| Active | Red |
Custom Styling Example
<style>
a {
color: green;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
</style>
Broken Links क्या होते हैं?
जब href में दी गई file या URL मौजूद नहीं होती, तो उसे Broken Link कहते हैं।
❌ Example:
<a href="missing.html">Broken Link</a>
✔ Always सही path और URL check करें।
Best Practices for HTML Links
✅ Meaningful link text लिखें
❌ “Click Here” avoid करें
✅ SEO-friendly text:
<a href="html-tutorial.html">HTML Tutorial</a>
✅ External links के लिए _blank का उपयोग करें
✅ Images में हमेशा alt attribute दें
Real-World Example
<nav>
<a href="index.html">Home</a> |
<a href="about.html">About</a> |
<a href="services.html">Services</a> |
<a href="contact.html">Contact</a>
</nav>
📌 Navigation menu links इसी तरह बनाए जाते हैं।
Summary (Quick Revision)
✔ HTML Links <a> tag से बनते हैं
✔ href destination बताता है
✔ target="_blank" new tab खोलता है
✔ Image, email, phone सब link बन सकते हैं
✔ Styling CSS से की जाती है