1. Introduction to Links in HTML
Hyperlinks (or simply links) are one of the most important elements of the web. They allow users to navigate between pages, sections, or external websites.
HTML provides the <a> (anchor) tag to create links.
Basic Syntax of a Link:
<a href="https://example.com">Visit Example</a>
✅ Output:
Visit Example
✔ href – Specifies the URL to navigate to.
✔ Text between <a> and </a> becomes clickable.
2. Types of Links
2.1 Internal Links (Same Website)
Used to link to another page within the same website.
<a href="about.html">About Us</a>
✅ Best for website navigation (Home, Contact, Services, etc.).
2.2 External Links (Other Websites)
Used to link to an external website.
<a href="https://www.google.com">Visit Google</a>
2.3 Anchor Links (Jump to Section)
Links that jump to a specific section of the same page.
<a href="#contact">Go to Contact Section</a>
<h2 id="contact">Contact Us</h2>
✅ Helps users navigate long pages easily.
3. Opening Links in a New Tab
By default, links open in the same tab. To open in a new tab, use target="_blank".
<a href="https://example.com" target="_blank">Open in New Tab</a>
✅ Security Tip: Always use rel="noopener noreferrer" when opening links in a new tab.
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Secure New Tab</a>
Prevents security risks from phishing attacks.
4. Linking to Email & Phone Numbers
4.1 Email Links
Use mailto: to create an email link.
<a href="mailto:info@example.com">Email Us</a>
✅ Clicking the link opens the email client.
4.2 Phone Number Links
Use tel: to create a clickable phone number.
<a href="tel:+1234567890">Call Us</a>
✅ Clicking the link starts a phone call.
5. Adding Tooltips to Links
Use the title attribute to display a tooltip on hover.
<a href="https://example.com" title="Click to visit Example">Example</a>
✅ Improves user experience with extra information.
6. Styling Links with CSS
6.1 Changing Link Colors
a {
color: blue; /* Default link color */
}
a:hover {
color: red; /* Color when hovered */
}
✅ Makes links more visually appealing.
6.2 Removing Underline from Links
a {
text-decoration: none;
}
Use carefully – underlines help users recognize links.
7. Creating a Simple Navigation Menu
7.1 Horizontal Navigation Menu
<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>
✅ Output:
Home | About | Services | Contact
7.2 Navigation Bar with CSS
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
nav ul {
list-style-type: none;
background: #333;
padding: 10px;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
color: white;
text-decoration: none;
}
✅ Creates a simple, styled navigation bar.
8. Full Example: HTML Links & Navigation
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Links & Navigation</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
nav ul {
list-style-type: none;
background: #333;
padding: 10px;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
color: white;
text-decoration: none;
}
</style>
</head>
<body>
<h1>HTML Links & Navigation</h1>
<h2>Basic Link</h2>
<a href="https://example.com">Visit Example</a>
<h2>Internal Link</h2>
<a href="about.html">Go to About Page</a>
<h2>Open Link in New Tab</h2>
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Open in New Tab</a>
<h2>Email and Phone Links</h2>
<a href="mailto:info@example.com">Send an Email</a><br>
<a href="tel:+1234567890">Call Us</a>
<h2>Navigation Menu</h2>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</body>
</html>
✅ This example covers all types of links with proper structure.
9. Best Practices for Links & Navigation
✅ Use descriptive link text instead of generic “Click Here”.
✅ Use target="_blank" for external links only.
✅ Keep internal links relative (about.html instead of https://yourwebsite.com/about.html).
✅ Avoid broken links – always test your links.
✅ Style links for better user experience.
Conclusion
In this chapter, you learned:
✅ How to create different types of links (internal, external, anchor, email, phone).
✅ How to open links in a new tab securely.
✅ How to style links with CSS.
✅ How to create a simple navigation menu.