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
HTML DOM Base href Property
The HTML DOM Base href property is used to get or set the value of the href attribute of the <base> element. The <base> tag specifies the base URL for all relative URLs in an HTML document, and there can be a maximum of one <base> tag per document.
Syntax
Following is the syntax for setting the href property −
baseObject.href = URL
Following is the syntax for returning the href property −
baseObject.href
Here, URL is a string representing the base URL for relative URLs in the document.
Return Value
The property returns a DOMString representing the absolute URL that serves as the base URL for relative URLs in the document.
Example − Setting and Getting Base href
Following example demonstrates how to set and get the Base href property −
<!DOCTYPE html>
<html>
<head>
<title>Base href Property Example</title>
<base id="myBase" href="https://www.bing.com">
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Base href Property Demo</h2>
<p>Base URL: <span id="currentBase">https://www.bing.com</span></p>
<p>Relative link: <a href="/images" id="relativeLink">IMAGES</a></p>
<button onclick="setHref()">Change Base URL</button>
<button onclick="getHref()">Get Current Base URL</button>
<button onclick="showFullURL()">Show Full Link URL</button>
<p id="result" style="margin-top: 15px; padding: 10px; background-color: #f0f8ff; border-left: 4px solid #0066cc;"></p>
<script>
function setHref() {
document.getElementById("myBase").href = "https://duckduckgo.com";
document.getElementById("currentBase").textContent = "https://duckduckgo.com";
document.getElementById("result").innerHTML = "Base URL changed from bing.com to duckduckgo.com";
}
function getHref() {
var baseURL = document.getElementById("myBase").href;
document.getElementById("result").innerHTML = "Current base URL: " + baseURL;
}
function showFullURL() {
var link = document.getElementById("relativeLink");
document.getElementById("result").innerHTML = "Full URL of relative link: " + link.href;
}
</script>
</body>
</html>
The output shows how the base URL affects relative links. Initially, the "/images" link resolves to "https://www.bing.com/images", and after changing the base URL, it resolves to "https://duckduckgo.com/images" −
Base href Property Demo Base URL: https://www.bing.com Relative link: IMAGES [Change Base URL] [Get Current Base URL] [Show Full Link URL] (Clicking buttons shows respective results in the blue info box)
Example − Multiple Relative URLs
Following example shows how changing the base URL affects multiple relative links −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Relative URLs</title>
<base id="siteBase" href="https://www.tutorialspoint.com/">
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Multiple Relative Links Example</h2>
<p>Current base: <span id="baseDisplay">https://www.tutorialspoint.com/</span></p>
<ul>
<li><a href="html/index.htm" id="htmlLink">HTML Tutorial</a></li>
<li><a href="css/index.htm" id="cssLink">CSS Tutorial</a></li>
<li><a href="javascript/index.htm" id="jsLink">JavaScript Tutorial</a></li>
</ul>
<button onclick="changeToW3C()">Change Base to W3C</button>
<button onclick="showAllURLs()">Show All Full URLs</button>
<div id="urlDisplay" style="margin-top: 15px; padding: 10px; background-color: #f9f9f9; border: 1px solid #ddd;"></div>
<script>
function changeToW3C() {
document.getElementById("siteBase").href = "https://www.w3schools.com/";
document.getElementById("baseDisplay").textContent = "https://www.w3schools.com/";
document.getElementById("urlDisplay").innerHTML = "Base URL changed to W3Schools. All relative links now point to W3Schools.";
}
function showAllURLs() {
var htmlURL = document.getElementById("htmlLink").href;
var cssURL = document.getElementById("cssLink").href;
var jsURL = document.getElementById("jsLink").href;
document.getElementById("urlDisplay").innerHTML =
"<strong>Full URLs:</strong><br>" +
"HTML: " + htmlURL + "<br>" +
"CSS: " + cssURL + "<br>" +
"JavaScript: " + jsURL;
}
</script>
</body>
</html>
This demonstrates how all relative URLs in the document are affected when the base href is changed −
Multiple Relative Links Example Current base: https://www.tutorialspoint.com/ ? HTML Tutorial ? CSS Tutorial ? JavaScript Tutorial [Change Base to W3C] [Show All Full URLs] (URLs change from tutorialspoint.com/html/ to w3schools.com/html/ when base is changed)
How It Works
When you access the href property of a <base> element, the following occurs −
-
Getting the value − Returns the current base URL as an absolute URL string, even if it was set as a relative URL.
-
Setting the value − Updates the base URL for all relative URLs in the document. The browser immediately recalculates all relative URLs based on the new base.
-
Relative URL resolution − All anchor tags, image sources, form actions, and other relative URLs in the document use this base URL for resolution.
Key Points
-
Only one
<base>element is allowed per HTML document. If multiple base elements exist, only the first one is used. -
The base href affects all relative URLs in the document, including anchor links, image sources, form actions, and CSS imports.
-
When you get the href property, it always returns an absolute URL, even if the base was originally set with a relative URL.
-
Changing the base href dynamically affects existing relative URLs immediately without requiring page reload.
-
The
<base>element must be placed in the<head>section of the document.
Conclusion
The HTML DOM Base href property provides a way to programmatically control the base URL for all relative URLs in a document. This property is useful for dynamically changing the resolution context of relative links, making it easier to manage URLs in single-page applications or when working with different environments.
331 Views
