<base>

  • Revision slug: Web/HTML/Element/base
  • Revision title: <base>
  • Revision id: 399125
  • Created:
  • Creator: tregagnon
  • Is current revision? No
  • Comment

Revision Content

Summary

The HTML <base> element specifies the base URL to use for all relative URLs contained within a document.

Usage Note: If multiple <base> elements are specified, only the first href and first target value are used; all others are ignored.
  • Content categories Metadata content.
  • Permitted content Empty; this is a void element.
  • Tag omission {{no_tag_omission}}
  • Permitted parent elements Any {{HTMLElement("head")}} that doesn't content any other {{HTMLElement("base")}} element
  • DOM interface {{domxref("HTMLBaseElement")}}

Attributes

This element includes the global attributes.

{{htmlattrdef("href")}}
The base URL to be used throughout the document for relative URL addresses. If this attribute is specified, this element must come before any other elements with attributes whose values are URLs.
Absolute and relative URIs are allowed (but see note section below).
{{htmlattrdef("target")}}
A name or keyword indicating the default location to display the result when hyperlinks or forms cause navigation, for elements that do not have an explicit target reference. In HTML4, this is the name of, or a keyword for, a frame. In HTML5, it is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). The following keywords have special meanings:
  • _self: Load the result into the same HTML4 frame (or HTML5 browsing context) as the current one. This value is the default if the attribute is not specified.
  • _blank: Load the result into a new unnamed HTML4 window or HTML5 browsing context.
  • _parent: Load the result into the HTML4 frameset parent of the current frame or HTML5 parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
  • _top: In HTML4: Load the result into the full, original window, canceling all other frames. In HTML5: Load the result into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.

Examples

<base href="http://www.example.com/">
<base target="_blank" href="http://www.example.com/">  

Specifications

Specification Status Comment
{{SpecName('HTML WHATWG', 'semantics.html#the-base-element', '<base>')}} {{Spec2('HTML WHATWG')}}  
{{SpecName('HTML5 W3C', 'the-base-element.html#the-base-element', '<base>')}} {{Spec2('HTML5 W3C')}}  
{{SpecName('HTML4.01', 'struct/links.html#h-12.4', '<base>')}} {{Spec2('HTML4.01')}}  

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{CompatVersionUnknown}} {{CompatGeckoDesktop("1.0")}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{CompatVersionUnknown}} {{CompatGeckoMobile("1.0")}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}

Notes

  • The base URL of a document can be queried from a script using {{domxref('document.baseURI')}}.
  • Support of relative URIs for href was added in Gecko 2.0 (Firefox 4.0)
  • HTML 2.0 and 3.2 define only the href attribute
  • XHTML requires a trailing slash: <base />

See also

{{HTML:Element_Navigation}}

Revision Source

<h2 id="Summary">Summary</h2>
<p>The <strong>HTML <code>&lt;base&gt;</code> element</strong> specifies the base URL to use for all relative URLs contained within a document.</p>
<div class="note">
  <strong>Usage Note:</strong> If multiple <code>&lt;base&gt;</code> elements are specified, only the first <strong>href</strong> and first <strong>target</strong> value are used; all others are ignored.</div>
<ul class="htmlelt">
  <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> Metadata content.</li>
  <li><dfn>Permitted content</dfn> Empty; this is a void element.</li>
  <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li>
  <li><dfn>Permitted parent elements</dfn> Any {{HTMLElement("head")}} that doesn't content any other {{HTMLElement("base")}} element</li>
  <li><dfn>DOM interface</dfn> {{domxref("HTMLBaseElement")}}</li>
</ul>
<h2 id="Attributes">Attributes</h2>
<p><span style="line-height: 21px;">This element includes the&nbsp;</span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p>
<dl>
  <dt>
    {{htmlattrdef("href")}}</dt>
  <dd>
    The base URL to be used throughout the document for relative URL addresses. If this attribute is specified, this element must come before any other elements with attributes whose values are URLs.<br />
    Absolute and relative URIs are allowed (but see note section below).</dd>
  <dt>
    {{htmlattrdef("target")}}</dt>
  <dd>
    A name or keyword indicating the default location to display the result when hyperlinks or forms cause navigation, for elements that do not have an explicit target reference. In HTML4, this is the name of, or a keyword for, a frame. In HTML5, it is a name of, or keyword for, a <em>browsing context</em> (for example, tab, window, or inline frame). The following keywords have special meanings:
    <ul>
      <li><code>_self</code>: Load the result into the same HTML4 frame (or HTML5 browsing context) as the current one. This value is the default if the attribute is not specified.</li>
      <li><code>_blank</code>: Load the result into a new unnamed HTML4 window or HTML5 browsing context.</li>
      <li><code>_parent</code>: Load the result into the HTML4 frameset parent of the current frame or HTML5 parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li>
      <li><code>_top</code>: In HTML4: Load the result into the full, original window, canceling all other frames. In HTML5: Load the result into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as <code>_self</code>.</li>
    </ul>
  </dd>
</dl>
<h2 id="Examples">Examples</h2>
<pre class="brush: html">
&lt;base href="http://www.example.com/"&gt;
&lt;base target="_blank" href="http://www.example.com/"&gt;  
</pre>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('HTML WHATWG', 'semantics.html#the-base-element', '&lt;base&gt;')}}</td>
      <td>{{Spec2('HTML WHATWG')}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{SpecName('HTML5 W3C', 'the-base-element.html#the-base-element', '&lt;base&gt;')}}</td>
      <td>{{Spec2('HTML5 W3C')}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.4', '&lt;base&gt;')}}</td>
      <td>{{Spec2('HTML4.01')}}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatGeckoDesktop("1.0")}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatGeckoMobile("1.0")}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="Notes">Notes</h2>
<ul>
  <li>The base URL of a document can be queried from a script using {{domxref('document.baseURI')}}.</li>
  <li>Support of relative URIs for <code>href</code> was added in Gecko 2.0 (Firefox 4.0)</li>
  <li>HTML 2.0 and 3.2 define only the <code>href</code> attribute</li>
  <li>XHTML requires a trailing slash: <code>&lt;base /&gt;</code></li>
</ul>
<h2 id="See_also">See also</h2>
<div>
  {{HTML:Element_Navigation}}</div>
Revert to this revision