base

< html‎ | elements
Jump to: navigation, search

base

This page has been flagged with the following issues:

High-level issues:


W3C Recommendation

Summary

The <base> element is used to specify a document's base URL and base target that is used for resolving relative URLs within the document.


Overview Table

DOM Interface HTMLBaseElement
Permitted contents none
Permitted parents Only permitted to occur once within <head>.
Tag omission A <base> element must not have an end tag.

A relative URL (some/example.html) needs to be transformed to a fully qualified URL (http://example.org/some/example.html) before it can be downloaded. Usually the document's URL (available to JavaScript through the location object) is used as the base URL for resolving relative URLs. The <base> element allows you to override this default with the href attribute.

Links (<a>) and forms (<form>) open in a (target). The default target is _self, resulting in the link opening in the same window as the document currently viewed. This default can be overridden document-wide using <base target="…">.

If a document is integrated in an iframe, it may help to specify <base target="_parent"> in order to open the links within the iframe in the scope parent document. If _parent or _top are used without the document really being integrated in an hierarchy, expect the behavior of _self.

Examples

The example shows a link with the relative destination some-file.html that gets rewritten to http://example.org/deep/some-file.html

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>base element example</title>
    <base href="http://www.example.org/deep/&quot;>
  </head>
  <body>
    <p>A <a href="some-file.html">relative link</a>.</p>
    <!-- after resolving the above link equals to -->
    <p>A <a href="http://www.example.org/deep/some-file.html&quot;>relative link</a>.</p>
  </body>
</html>

The example shows a link that is opened in a new window (or tab)

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>base element example</title>
    <base target="_blank">
  </head>
  <body>
    <p>A <a href="some-file.html">relative link</a>.</p>
    <!-- after resolving the above link equals to -->
    <p>A <a href="some-file.html" target="_blank">relative link</a>.</p>
  </body>
</html>

The example shows that <base> only affects elements following it

HTML

<head>
  <title>base element example</title>
  <link href="my-style.css" rel="stylesheet">
  <base href="http://example.com&quot;>
  <link href="my-other-style.css" rel="stylesheet">
  <!--
    resolves to
    [current domain and directory]/my-style.css
    http://example.com/my-other-style.css
  -->
</head>

The example shows how multiple <base> occurrences are collapsed and ignored

HTML

<head>
  <title>base element example</title>
  <base href="http://example.com&quot;>
  <base target="_blank">
  <base href="http://webplatform.org&quot; target="_top">
  <!--
    equals to the single definition:
    <base href="http://example.com/&quot; target="_blank">
    except for Internet Explorer, where only the first element is read:
    <base href="http://example.com/&quot; target="_self">    
  -->
</head>

The example shows how a relative base URL can be made to work in Internet Explorer

HTML

<head>
  <title>base element example</title>
  <base href="sub-directory/">
  <script>
    (function() {
      var base = document.getElementsByTagName('base')[0];
      base.href = base.href + "";
    })();
  </script>
  <!--
    if this URL of the document is 
    http://example.com/index.html the 
    resolved base href is
    http://example.com/sub-directory/ 
  -->
</head>

Notes

  • Relative URLs within <base> don't work in every browser, resolving a relative base URL was introduced in Firefox 4 and Internet Explorer 10.
  • <base> only affects elements following it's declaration.
  • multiple <base> declarations are illegal, only the first href and target are used, the rest is discarded. Internet Explorer ignores all <base> instances after the first.

In Internet Explorer 8 and later, when read, the value of the href attribute depends on the current document compatibility mode. In addition, relative URL's are no longer supported by the base element.

Note Internet Explorer 6 and older would allow the <base> element to appear anywhere in the document tree, which caused relative paths to use the "nearest" <base> element as the base for the URL. Internet Explorer 7 strictly enforces the use of the <base> tag within the <head> of the document, and will ignore misplaced tags.

Although relative URLs in <base href="…"> are not resolved in every version of Internet Explorer, they are properly resolved against the document's URL upon read. That in turn allows to set a fully qualified URL from within JavaScript: base.href = base.href + "";;

Note Inline SVGs using references like fill="url(#element-id)" can be a problem in documents using <base>. The reason is that url(#element-id) is actually a URL, not a CSS selector. At least Firefox and Chrome are susceptible to this behavior. Internet Explorer doesn't fall for it.


Related specifications

Specification Status Related Changes
HTML 4.01 Specification W3C Recommendation
HTML5 W3C Working Draft
WHATWG Living Standard

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? ? ? ? ?

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic support ? ? ? ? ? ? ? ?

See also

Related articles

HTML




























  • base























… further results


External resources