How to specify the base URL for all relative URLs in a document using HTML5?

26 Mar, 2021
It’s a lot of effort to change URLs on migration or maintain every URL on the page when you have hardcoded every href’s so it’s a better choice to have a root/base URI and using relative paths to all the resources.
Using <base> tag:
<base> tag must reside inside <head> and </head> tag. You should use the <base> tag only once on one HTML page. If you use it multiple times, only the first one will be validated and the rest will be ignored.<base> tag is a self-closing tag, so you should not use a closing tag It is recommended to use forward slash “/” after root URI.
<base> tag must reside inside <head> and </head> tag.
 You should use the <base> tag only once on one HTML page. If you use it multiple times, only the first one will be validated and the rest will be ignored.
<base> tag is a self-closing tag, so you should not use a closing tag
 It is recommended to use forward slash “/” after root URI.
Syntax:
<base href="http://example.com/">
or
<base target="_blank" href="http://example.com/">
Example: If you wish to open a link in a new tab, follow the code below. 
In the below code, we have set “https://www.geeksforgeeks.org/” as the root URL for every relative URL on the page. The  “introduction-to-java/” will open up the “https://www.geeksforgeeks.org/introduction-to-java/” webpage and “java-basic-syntax/” will open up the “https://www.geeksforgeeks.org/java-basic-syntax/” for the browsers.
HTML
<!DOCTYPE html><html><head>    <base href="https://www.geeksforgeeks.org/" ></head><body>    <a href="introduction-to-java/">Intro To Java</a>    <br>    <a href="java-basic-syntax/">Java Basic syntax</a></body></html>
Output:
base URL usage
Example 2: In the following example, the base URL is set to “http://127.0.0.1:5500/img/“, so when the image file is included in the img tag, the image is loaded from the localhost.
HTML
<!DOCTYPE html><html><head>    <base href="http://127.0.0.1:5500/img/" ></head><body>    <img src="gfg-logo.png" alt="logo"></body></html>
Output:
Example 2: In the following example, the root is set to “https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200617163105/“, the image file “gfg-logo.png” is loaded from the geeksforgeeks server.
HTML
<!DOCTYPE html><html><head>    <base href="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200617163105/"></head><body>    <img src="gfg-logo.png" alt="logo"></body></html>
Output:
So if you are going to use the base tag, make sure all your resources which you are going to access using relative path are on the same server otherwise your resources will be misunderstood by browsers.
HTML-Questions
HTML5
Picked
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
REST API (Introduction)
CSS to put icon inside an input element in a form
Design a Tribute Page using HTML & CSS
Types of CSS (Cascading Style Sheet)
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array