Creating Hyperlinks in HTML
Hyperlinks, commonly called links or anchors, are the lifeblood of the web. They are what allows users to navigate from one document to another, effectively weaving the internet together.
In HTML, every link is created using the <a> tag, which stands for Anchor. The key to using this tag is the href attribute, which specifies the destination—the URL or path—the user will be taken to upon clicking.
1. Creating Basic Links (The href Attribute)
The core function of the <a> tag is to wrap the text (or image) that should be clickable, and the href attribute tells the browser where to go.
A. Linking to External Websites (Absolute URLs)
To link to any website outside of your current domain, you must use an Absolute URL. This includes the full address, starting with the protocol (https://).
<body>
<h1>Welcome to my website!</h1>
<p>Click <a href="https://ajay-dhangar.github.io/">here</a> to visit my portfolio.</p>
</body>
B. Linking Within Your Website (Relative URLs)
To link to another page within the same website, you should use a Relative URL. This only uses the path starting from your current location, which is more efficient and easier to manage if you move your entire site.
<p>Click <a href="about.html">here</a> to learn more about me.</p>
<p>Go back to the <a href="../index.html">main site</a>.</p>
2. Controlling Link Behavior
HTML offers several attributes to control how and where the linked document opens.
The target Attribute
This attribute defines where the linked document should be displayed.
| Value | Description | Use Case |
|---|---|---|
_self | (Default) Opens the link in the same browser window/tab. | Use for internal links. |
_blank | Opens the link in a new browser window/tab. | Best Practice for opening external websites, so users don't leave your site entirely. |
_parent | Opens in the parent frame (used in complex frame setups). | Rarely used in modern web dev. |
_top | Opens in the full body of the window. | Rarely used in modern web dev. |
<p>Visit the external site <a href="https://google.com" target="_blank">Google</a>.</p>
The title Attribute
This attribute provides a short, non-essential description for the link. This text appears as a tooltip when the user hovers their mouse over the link.
<a href="/mission" title="Learn about our mission">Our Mission</a>
3. Linking to Sections on the Same Page (Anchors)
This technique is used to create smooth, internal navigation, often seen in tables of contents or "Back to Top" buttons.
This process requires two steps:
- Define the Target: Use the
idattribute on any element (like a heading or a<div>) where you want the link to land. - Create the Link: Use the hash symbol (
#) followed by the targetidin thehrefattribute.
Internal Anchor Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal Link Example</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>Click <a href="#about-section">here</a> to jump to the About section.</p>
<p>Click <a href="#contact-section">here</a> to jump to the Contact section.</p>
<h2 id="about-section">About My Work</h2>
<p>This is the detailed About section of the page, defining the scope of the project.</p>
<h2 id="contact-section">Contact Information</h2>
<p>Find out how to get in touch with the team.</p>
</body>
</html>
4. Key Attributes Summary
| Attribute | Purpose | Values | Usage Example |
|---|---|---|---|
href | Required destination URL or path. | Absolute URL, Relative path, or #id. | <a href="contact.html"> |
target | Where to open the linked document. | _self (default), _blank (new tab). | <a target="_blank"> |
title | Text displayed as a tooltip on hover. | Descriptive text string. | <a title="Go to Home Page"> |
id | Defines the unique anchor point for internal linking. | Any unique string. | <h2 id="section-1"> |
Conclusion
Hyperlinks, created with the <a> tag and the vital href attribute, are the foundation of navigation. By mastering relative paths for internal navigation, absolute URLs for external sites, and the target="_blank" attribute for external links, you ensure a clean, functional, and user-friendly web experience.