Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to specify the URL of the page the link goes to in HTML?
The href attribute in HTML is used to specify the URL of the page that a link should navigate to. The href attribute is primarily used with the <a> (anchor) tag to create hyperlinks that allow users to navigate between web pages or different sections within the same page.
Syntax
Following is the syntax for using the href attribute with anchor tags −
<a href="URL">Link Text</a>
The URL can be an absolute URL, relative URL, or an anchor link to a section within the same page.
Types of URLs in href Attribute
The href attribute supports different types of URL formats −
Absolute URL − Complete web address including protocol (http/https)
Relative URL − Path relative to the current page location
Anchor Link − Link to a specific section within the same page using # symbol
Email Link − Link to open email client using mailto: protocol
Phone Link − Link to dial a phone number using tel: protocol
Absolute URL Links
Absolute URLs contain the complete web address including the protocol and domain name.
Example
Following example demonstrates absolute URL links −
<!DOCTYPE html>
<html>
<head>
<title>Absolute URL Links</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>External Website Links</h2>
<p>Visit these educational websites:</p>
<ul>
<li><a href="https://www.tutorialspoint.com">TutorialsPoint</a></li>
<li><a href="https://www.w3schools.com">W3Schools</a></li>
<li><a href="https://developer.mozilla.org">MDN Web Docs</a></li>
</ul>
</body>
</html>
The output displays clickable links that navigate to external websites −
External Website Links Visit these educational websites: ? TutorialsPoint (clickable link) ? W3Schools (clickable link) ? MDN Web Docs (clickable link)
Relative URL Links
Relative URLs specify the path to another page relative to the current page's location. This is useful for linking to other pages within the same website.
Example
Following example shows different types of relative URL links −
<!DOCTYPE html>
<html>
<head>
<title>Relative URL Links</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Site Navigation</h2>
<nav>
<ul>
<li><a href="/index.html">Home Page</a></li>
<li><a href="/about/about.html">About Us</a></li>
<li><a href="./contact.html">Contact (Same Directory)</a></li>
<li><a href="../parent/page.html">Parent Directory</a></li>
</ul>
</nav>
</body>
</html>
The output shows navigation links using different relative path formats −
Site Navigation ? Home Page (link to root directory) ? About Us (link to subfolder) ? Contact (Same Directory) (link to current directory) ? Parent Directory (link to parent folder)
Anchor Links for Page Sections
Anchor links use the hash symbol (#) to link to specific sections within the same page by referencing element IDs.
Example
Following example demonstrates anchor links for page navigation −
<!DOCTYPE html>
<html>
<head>
<title>Anchor Links Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Table of Contents</h2>
<ul>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#conclusion">Conclusion</a></li>
</ul>
<div style="height: 200px;"></div>
<h3 id="introduction">Introduction</h3>
<p>This is the introduction section of our tutorial.</p>
<h3 id="features">Features</h3>
<p>Here we discuss the main features of HTML links.</p>
<h3 id="conclusion">Conclusion</h3>
<p>Summary and final thoughts about HTML href attribute.</p>
</body>
</html>
Clicking each table of contents link scrolls the page to the corresponding section.
Special Protocol Links
The href attribute supports special protocols for email and phone links.
Example − Email and Phone Links
Following example shows mailto and tel protocol usage −
<!DOCTYPE html>
<html>
<head>
<title>Email and Phone Links</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Contact Information</h2>
<p>Get in touch with us:</p>
<ul>
<li>Email: <a href="mailto:support@tutorialspoint.com">support@tutorialspoint.com</a></li>
<li>Phone: <a href="tel:+1234567890">+1 (234) 567-890</a></li>
<li>Email with Subject: <a href="mailto:info@example.com?subject=HTML Tutorial Question">Send Question</a></li>
</ul>
</body>
</html>
The output provides clickable email and phone links −
Contact Information Get in touch with us: ? Email: support@tutorialspoint.com (opens email client) ? Phone: +1 (234) 567-890 (opens dialer on mobile) ? Email with Subject: Send Question (opens email with pre-filled subject)
Link Target Attributes
While href specifies the destination, the target attribute controls how the link opens. Common values include _blank (new tab), _self (same tab), and _parent (parent frame).
Example − Links with Target Attributes
<!DOCTYPE html>
<html>
<head>
<title>Links with Target Attributes</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Different Link Behaviors</h2>
<ul>
<li><a href="https://www.tutorialspoint.com" target="_blank">Open in New Tab</a></li>
<li><a href="https://www.tutorialspoint.com" target="_self">Open in Same Tab</a></li>
<li><a href="/contact.html">Default Behavior (Same Tab)</a></li>
</ul>
</body>
</html>
The first link opens in a new browser tab, while the others replace the current page content.
Conclusion
The href attribute is essential for creating navigation in HTML, supporting absolute URLs, relative paths, anchor links, and special protocols like mailto and tel. Combined with the target attribute, it provides complete control over link behavior and user navigation experience.
650 Views
