HTML <base> tag is used to specify a base URI or URL to use for all relative links contained within an HTML document.
Only one <base> element can be specified within a document, and it must be placed within <head> element. We can also specify how other links should open (in the same window, in another window, etc.) using the target attribute.
Syntax
<base href="https://www.google.com">
In HTML <base> element does not contain closing tag but in XHTML end tag </base> is required.
Following are some specifications about the <base> tag
| Display | None |
| Start tag/End tag | Only start-tag |
| Usage | Anchors and links |
Example
Open in same window (by default)
<!DOCTYPE html>
<html>
<head>
<title>Base tag</title>
<style>
a{text-decoration: none;
color:black;}
a:hover{color: green;
font-size: 18px;}
</style>
<base href="https://www.google.com">
</head>
<body>
<h2 style="color: red; font-size: 30px; font-style: italic;">List of Web developement Tutorial</h2>
<a href="/html-tutorial">HTML tutorial</a><br>
<a href="/css-tutorial">CSS tutorial</a><br>
<a href="/bootstrap-tutorial">Bootstrap tutorial</a><br>
<a href="/javascript-tutorial">JavaScript tutorial</a><br>
<a href="/jquery-tutorial">JavaScript tutorial</a>
</body>
</html>
In the above example we have used base URL =” https://www.google.com” which all other relative links will treat as starting URL. Here (/) defines the root URL of the current document.
Open in new window (using _blank in <base> tag):
<!DOCTYPE html>
<html>
<head>
<title>Base tag</title>
<style>
a{text-decoration: none;
color:black;}
a:hover{color: green;
font-size: 18px;}
</style>
<base href="https://www.google.com" target="_blank">
</head>
<body>
<h2 style="color: red; font-size: 30px; font-style: italic;">List of Web developement Tutorial</h2>
<a href="/html-tutorial">HTML tutorial</a><br>
<a href="/css-tutorial">CSS tutorial</a><br>
<a href="/bootstrap-tutorial">Bootstrap tutorial</a><br>
<a href="/javascript-tutorial">JavaScript tutorial</a><br>
<a href="/jquery-tutorial">JavaScript tutorial</a>
</body>
</html>
In the above example we have used target=”_blank” in only <base> tag but it is applied on whole document links.
Attribute
Tag Specific attributes:
| Attribute | Value | Definition |
|---|---|---|
| href | URL | It specifies the base URL for all relative links. |
| target | ||
| _blank | Open the relative link in the new window | |
| _self | Open the relative link in current window | |
| _parent | Open the relative link in the parent frame | |
| _top | Open the links in full width of the page |
Global Attribute
The <base> tag supports all global attributes in HTML
Event Attribute
The <base> does not support the event attributes in HTML
Supporting Browsers
| Element | Chrome | IE | Firefox | Opera | Safari |
| <base> | Yes | Yes | Yes | Yes | Yes |
Chrome
IE
Firefox
Opera
Safari