HTML में Links (Hyperlinks) का उपयोग एक वेबपेज को दूसरे वेबपेज, वेबसाइट, फाइल, ईमेल या किसी विशेष सेक्शन से जोड़ने के लिए किया जाता है। जब उपयोगकर्ता लिंक पर क्लिक करता है, तो वह निर्धारित स्थान पर पहुँच जाता है।
HTML में लिंक बनाने के लिए <a> (Anchor) Tag का उपयोग किया जाता है।
Syntax :
<a href="URL">Link Text</a>Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<a href="https://www.google.com">Google Open Kare</a>
</body>
</html>Output :
Anchor Tag Attributes :
| Attribute | उपयोग |
|---|---|
href | लिंक का पता (URL) देता है |
target | लिंक कहाँ खुलेगा यह निर्धारित करता है |
title | लिंक पर माउस ले जाने पर जानकारी दिखाता है |
download | फाइल डाउनलोड करवाता है |
1. External Link
जब किसी दूसरी वेबसाइट पर जाना हो तो External Link का उपयोग किया जाता है।
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<a href="https://www.amazon.in">
Amazon Website
</a>
</body>
</html>Output :
2. Internal Link
जब अपनी वेबसाइट के किसी दूसरे पेज पर जाना हो तब internal link का उपयोग किया जाता है |
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<a href="https://codecse.com/about-us/">About Us</a>
</body>
</html>Output :
3. Open Link in New Tab
यदि लिंक को नए टैब में खोलना हो तो target="_blank" का उपयोग किया जाता है।
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<a href="https://www.google.com" target="_blank">
Google
</a>
</body>
</html>Output :
4. Email Link
Email link का उपयोग ईमेल भेजने के लिए लिंक बनाया जाता है |
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<a href="mailto:rb393976@gmail.com">
Email Us
</a>
</body>
</html>Output :
5. Phone Link
फोन लिंक का इस्तेमाल मोबाइल पर कॉल करने के लिए किया जाता है |
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<a href="tel:7498035054">
Call Now
</a>
</body>
</html>Output
6. Image as Link
इमेज लिंक का उपयोग इमेज को Clickable बनाने के लिए किया जाता है |
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<a href="https://www.google.com">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/51/Google.png " height="50" width="100"
alt="Logo">
</a>
</body>
</html>Output :
