Links (or hyperlinks) are a vital part of any webpage. Links in HTML are used to connect other pages, websites, documents, emails, or sections.
When a user clicks on any link text, the browser takes him to the new location.
In simple words, HTML Links allow you to navigate between web pages easily.
HTML links are created using the <a> tag (also called an “anchor tag”).
Write HTML link like this,
<a href="url">Link Text</a>- <a> – Defines an anchor (link)
- href – Specifies the URL of the linked document
- Link Text – The clickable text displayed to users
Example of Basic HTML Link
<a href="https://htmlonlinecompiler.net">Visit HTML Online Compiler</a>When the user clicks on this text, he is redirected to the given URL.
Absolute URLs vs Relative URLs
There are two types of HTML links, absolute URL and relative URL.
1. Absolute URL: Full path including domain name
Example:
<a href="https://example.com/page.html">Go to Page</a>2. Relative URL: Link within same website directory
Example:
<a href="/about.html">About Us</a>- Use relative links for internal pages.
- Use absolute links for external websites.
Opening Links in New Tab
If you want the link to open in a new tab or window when clicked, use the target=”_blank” attribute.
<a href="https://htmlonlinecompiler.net" target="_blank">Open in New Tab</a>Note: Always add rel=”noopener noreferrer” for security and performance.
<a href="https://htmlonlinecompiler.net" target="_blank" rel="noopener noreferrer">
Visit HTML Online Compiler
</a>Linking to Email or Phone
You can also give the user the option to send an email or make a phone call through an HTML link.
Email Link
<a href="mailto:support@example.com">Send Email</a>Clicking this opens the default mail app.
Phone Link
<a href="tel:+919876543210">Call Us</a>Clicking this opens the phone dialer on mobile devices.
Linking to a Specific Section (Internal Link)
Internal links help users jump to a particular section on the same page using id attributes.
Example:
<a href="#contact">Go to Contact Section</a>
<h2 id="contact">Contact Us</h2>
<p>You can reach us at example@example.com</p>When clicked, it automatically scrolls down to the contact section.
Adding Titles to Links
The title attribute adds a small tooltip when a user hovers over the link.
Example:
<a href="https://htmlonlinecompiler.net" title="Learn HTML, CSS and JavaScript tutorials">
HTML Online Compiler
</a>Tooltip appears: “Learn HTML, CSS and JavaScript tutorials”.
Image as a Link
You can also make an image clickable by wrapping it inside an <a> tag.
Example:
<a href="https://htmlonlinecompiler.net">
<img src="logo.png" alt="HTML Logo" width="150">
</a>Clicking the image will open the linked page.
Link Colors and Styling
By default, browsers use specific colors for links:
- 🔵 Blue – Unvisited links
- 🟣 Purple – Visited links
- 🔴 Red – Active links
But you can style them using CSS:
Example:
<style>
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: orange; text-decoration: underline; }
a:active { color: red; }
</style>Use :hover for mouse-over effects and :active for clicked states.
Creating a Download Link
You can allow users to download files (like PDFs, images, etc.) directly using the download attribute.
Example:
<a href="sample.pdf" download>Download PDF File</a>Clicking this link starts the download instead of opening the file.
Linking Between HTML Pages (Website Navigation)
You can use multiple links together to build a simple navigation menu.
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>This creates a basic navigation bar for your website.
Complete Example of HTML Links
<!DOCTYPE html>
<html>
<head>
<title>HTML Links Example</title>
</head>
<body>
<h2>HTML Links – Examples</h2>
<!-- Basic Link -->
<a href="https://htmlonlinecompiler.net">Visit Our Website</a>
<!-- Open in New Tab -->
<a href="https://htmlonlinecompiler.net" target="_blank" rel="noopener noreferrer">
Open in New Tab
</a>
<!-- Email Link -->
<a href="mailto:info@example.com">Contact Us via Email</a>
<!-- Section Link -->
<a href="#bottom">Go to Bottom Section</a>
<p>Some content here...</p>
<!-- Bottom Section -->
<h3 id="bottom">Bottom of the Page</h3>
</body>
</html>