HTML <base> Tag

The <base> tag specifies the base URL/target for all relative URLs in a document.

There can be at maximum one <base> element in a document, and it must be inside the <head> element.

Specific Attributes

The HTML <base> tag also supports following additional attributes:

Attribute Value Description
href URL Specifies the URL of a page or the name of the anchor that the link goes to.
target _blank
_parent
_self
_top
Where to open the target URL.
_blank – the target URL will open in a new window.
_self – the target URL will open in the same frame as it was clicked.
_parent – the target URL will open in the parent frameset
_top – the target URL will open in the full body of the window

Example
1.

</pre> <!DOCTYPE html>
<html>
<head>
<title>HTML base Tag</title>
<base href="http://www.musthaan.com" />
</head>
<body>
HTML: <img src="/images/html.gif" />
</body>
</html></pre>
<pre>

In this case image request to http://www.musthaan.com/images/html.gif

</pre> <!DOCTYPE html>
<html>
<head>
<title>HTML base Tag</title>
<base href="http://www.musthaan.com/external" />
</head>
<body>
HTML: <img src="/images/html.gif" />
</body>
</html></pre>
<pre>

In this case image request to http://www.musthaan.com/external/images/html.gif

2.

</pre> <!DOCTYPE html>
<html>
<head>
<title>HTML base Tag</title>
<base href="http://www.musthaan.com" target="_blank"/>
</head>
<body>
<a href="http://www.musthaan.com">musthaan </a>
<a href="http://www.500px.com">500px</a>
</body>
</html></pre>
<pre>

In this case both http://musthaan.com and http://www.500px.com will come in a new window. but we did’t mention it every time.

Browser Support

Chrome Firefox IE Opera Safari Android
Yes Yes Yes Yes Yes Yes

As to browser compatibility, this causes only problems in IE. The tag is in HTML specified as not having an end tag , so it’s legit to just use without an end tag. However IE6 thinks otherwise and the entire content after the tag is in such case placed as child of the element in the HTML DOM tree. This can cause at first sight unexplainable problems in Javascript/jQuery/CSS, i.e. the elements being completely unreachable in specific selectors like html>body, until you discover in the HTML DOM inspector that there should be a base (and head) in between.

A common IE6 fix is using an IE conditional comment to include the end tag:


If you don’t care about the W3 Validator, or when you’re on HTML5 already, then you can just self-close it, every webbrowser supports it anyway:
Closing the tag also instantly fixes the insanity of IE6 on WinXP SP3 to request// <![CDATA[
resources with an relative URI in src in an infinite loop.

Another potential IE problem will manifest when you use a relative URI in the tag, such as or . This will fail in IE6/7/8. This is however not exactly browser’s fault; using relative URIs in the tag is namely at its own wrong. The HTML4 specification stated that it should be an absolute URI, thus starting with the http:// or https:// scheme. This has been dropped in HTML5 specification. So if you use HTML5 and target HTML5 compatible browsers only, then you should be all fine by using a relative URI in the tag.
// ]]>

Advertisements