HTML <base> Tag Tutorial - Usage, Syntax, Attributes and Example

Introduction
Attributes
Frequently Asked Questions(FAQ)

INTRODUCTION

The <base> element defines the base URL of the document. Base URL is the starting point used to resolve all relative URLs. It generally contains root url or common part of URL.

The complete URL is formed by appending href attribute's value of anchor tag to this base URL. It is typically used to ensure that all relative links work correctly, even if the document is moved to a different location. It is defined in <head> section of webpage.

Only one <base> URL can be defined for a webpage. If multiple <base> elements are defined then only first <base> element is taken and all others are ignored.

This attribute must have an href attribute, a target attribute or both. If either of these attributes are defined then <base> element must come before any other element whose attribute's value contains URL such as <link>.

Syntax:


<head> 
  <base href="--URL--"/>
</head>

Example:


<head> 
 <base href="https://www.sample.com/" /> 
</head> 

<a href="about_us.html">ABOUT US</a>

In the above example as the base url is defined as https://www.sample.com/ the link points to https://www.sample.com/about_us.html

ATTRIBUTES

1. href

Its value is the base URL of webpage. Absolute and Relative URLs are allowed.

2. target

Target attribute specifies where to display the URL when a link is clicked. You have the option of opening the link in a new tab/window when user clicks on a link or in the same tab/window/iframe so the current browsing session is continued. It is important to understand browsing context to understand the values of this option.

A browsing context refers to the environment in which a browser renders a document. In modern browsers, this is typically a tab, but it can also be a window, a popup, a web application, or even a section of a page, such as a frame or an iframe.

Iframes can be nested within other iframe which is known as nested browsing context. In the below example we have nested iframes. Iframe-2 is parent of iframe-1 and Tab is top level browser Tab.

browsing-context

a. _self : It is the default value. It opens the URL in current window/tab or iframe. If an link in iframe-1 is set to _self then the destination link is opened in itself i.e. iframe-1. The same is true for iframe-2 and tab.

b. _blank : It opens the URL in new window/tab. Hence whether the link is in iframe-1, iframe-2 or tab, the destination link is always opened in new Tab/window.

c. _parent : It opens the URL in parent window. If an link in iframe-1 is set to _parent then the destination link is opened in iframe-2. Also if an link in iframe-2 which is set to _parent is clicked then the destination link is opened in tab.

d. _top : It opens the URL in top window and comes out of any nesting browsing-context. If a link in iframe-1 is set to _top then the destination link is opened in tab. The same is true for iframe-2(opens in tab).

Tag Omission

The HTML <base> element is void element. So, it must have start tag only and should not have end tag.

Frequently Asked Questions (FAQ)

What is html <base> tag?

The <base> element defines the base URL of the document. Base URL is the starting point used to resolve all relative URLs. It generally contains root url or common part of URL.

Does the HTML <base> tag apply to JavaScript and CSS as well?

The <base> tag sets a base URL for all relative URLs in the document — this affects links (<a href>), scripts ( <script src>), images(<img src>), stylesheets (<link href>), and other resource-fetching elements.