<base> : Base URL element

by

Introduction

The ‘<base>‘ tag specifies the base URL and/or target for all relative URLs in a document. The ‘<base>‘ tag must have either an ‘href‘ or a target attribute present, or both. There can only be one single ‘<base>‘ element in a document, and it must be inside the ‘<head>‘ element.

‘href‘: Specifies the base URL. All relative URLs in the document will be resolved with respect to this ‘base‘ URL.

Here is an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <base href="https://learncodingself.com/">
</head>
<body>
    <a href="tags/tag_base">Go to learncodingself</a>
</body>
</html>

Output :

And when we click on the “Go to learncodingself” then learncodingself website is open.

Uses of <base> tag :

1.Resolving Relative URLs: The primary purpose of the <base> tag is to set a base URL for resolving relative URLs. This includes URLs used in hyperlinks (<a>), images (<img>), scripts (<script>), and other elements. By setting a base URL, you can simplify the use of relative paths throughout the document.

2. Changing the Base URL Dynamically: You can dynamically change the base URL using JavaScript. This can be useful in scenarios where the base URL needs to be adjusted based on certain conditions or user interactions.

3. Working with Different Environments: The <base> tag can be handy when transitioning a website between different environments, such as development, testing, and production. It allows you to easily update the base URL, and all relative links will adapt accordingly.



Leave a Comment