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 link pages using absolute URL in HTML?
An absolute URL in HTML is a complete web address that includes the full path to a resource, including the protocol (http/https) and domain name. Unlike relative URLs, absolute URLs provide the complete location of a resource and can be used to link to external websites or specific pages within the same site.
What is an Absolute URL?
An absolute URL contains all the information needed to locate a resource on the web. It includes −
Protocol − Such as
http://orhttps://Domain name − The website address like
www.example.comPath − The specific location of the file or page
Absolute URLs never change regardless of the current page location, making them ideal for linking to external websites or when you need to specify the complete path to a resource.
Syntax
Following is the syntax to create a link using an absolute URL −
<a href="protocol://domain.com/path/to/page">Link Text</a>
The href attribute contains the complete absolute URL, and the text between the opening and closing <a> tags is the clickable link text that appears on the webpage.
Basic Absolute URL Example
Following example demonstrates linking to an external website using an absolute URL −
<!DOCTYPE html>
<html>
<head>
<title>Absolute URL Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>External Website Links</h2>
<p>Visit these popular websites:</p>
<ul>
<li><a href="https://www.google.com">Google Search</a></li>
<li><a href="https://www.youtube.com">YouTube Videos</a></li>
<li><a href="https://www.github.com">GitHub Repository</a></li>
</ul>
</body>
</html>
The output displays three clickable links that navigate to external websites −
External Website Links Visit these popular websites: ? Google Search ? YouTube Videos ? GitHub Repository
Linking to Specific Pages
Absolute URLs can link to specific pages or sections within external websites. Following example shows linking to specific pages −
<!DOCTYPE html> <html> <head> <title>Specific Page Links</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Learning Resources</h2> <p>Access these tutorial pages directly:</p> <a href="https://www.tutorialspoint.com/html/index.htm">HTML Tutorial</a><br><br> <a href="https://www.tutorialspoint.com/css/index.htm">CSS Tutorial</a><br><br> <a href="https://www.tutorialspoint.com/javascript/index.htm">JavaScript Tutorial</a> </body> </html>
Each link navigates directly to a specific tutorial page on the TutorialsPoint website −
Learning Resources Access these tutorial pages directly: HTML Tutorial CSS Tutorial JavaScript Tutorial
Styled Absolute URL Links
You can apply CSS styles to absolute URL links to improve their appearance. Following example demonstrates styled links −
<!DOCTYPE html>
<html>
<head>
<title>Styled Absolute URL Links</title>
<style>
.styled-link {
display: inline-block;
padding: 10px 15px;
margin: 5px;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s;
}
.styled-link:hover {
background-color: #0056b3;
text-decoration: none;
}
.styled-link:visited {
background-color: #6f42c1;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Social Media Links</h2>
<p>Connect with us on social platforms:</p>
<a href="https://www.facebook.com" class="styled-link">Facebook</a>
<a href="https://www.twitter.com" class="styled-link">Twitter</a>
<a href="https://www.linkedin.com" class="styled-link">LinkedIn</a>
</body>
</html>
The output shows three button-styled links with blue background that change color on hover −
Social Media Links Connect with us on social platforms: [Facebook] [Twitter] [LinkedIn] (Blue button-style links)
Opening Links in New Tab
When linking to external websites, it is often useful to open the link in a new tab using the target="_blank" attribute −
<!DOCTYPE html>
<html>
<head>
<title>Links Opening in New Tab</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>External References</h2>
<p>These links open in new tabs:</p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank">MDN HTML Documentation</a></li>
<li><a href="https://www.w3schools.com/html/" target="_blank">W3Schools HTML Tutorial</a></li>
<li><a href="https://html.spec.whatwg.org/" target="_blank">HTML Living Standard</a></li>
</ul>
<p><strong>Note:</strong> These links will open in new browser tabs.</p>
</body>
</html>
Each link opens in a new tab, keeping the original page accessible to the user.
Absolute vs Relative URLs
Following table compares absolute and relative URLs −
| Absolute URL | Relative URL |
|---|---|
| Contains complete path including protocol and domain | Contains only the path relative to current location |
Example: https://www.example.com/page.html
|
Example: page.html or ../folder/page.html
|
| Works from any location | Depends on current page location |
| Ideal for external links | Ideal for internal site navigation |
| Longer URL string | Shorter, more maintainable |
| Remains unchanged when site structure changes | May break if site structure changes |
Common Use Cases
Absolute URLs are commonly used for −
External website links − Linking to other websites, social media pages, or external resources
API endpoints − Referencing web services or APIs hosted on different domains
CDN resources − Loading stylesheets, scripts, or images from content delivery networks
Email links − When including links in HTML emails that need to work regardless of email client
Cross-domain references − Linking to resources on subdomains or different domains within the same organization
Conclusion
Absolute URLs provide complete web addresses including protocol and domain, making them essential for linking to external websites and resources. They remain consistent regardless of the current page location and are ideal for external links, API references, and cross-domain navigation. Use absolute URLs when linking outside your website or when you need guaranteed accessibility to a specific resource.
3K+ Views
