The base element is used to specify a document’s base URL and base target that is used for resolving URI references (relative URLs) within the document.
Overview TableA relative URL (
some/example.html) needs to be transformed to a fully qualified URL (
) before it can be downloaded. Usually the document's URL (available to JavaScript through the [`location`](/dom/Location) object) is used as the base URL for resolving relative URLs. The `
` element allows you to override this default with the [`href`](/html/attributes/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.
href
= URI, potentially surrounded by spaces
A base element, if it has an href attribute, must come before any other elements in the tree that have attributes defined as taking URLs, except the html element (its manifest attribute isn’t affected by base elements). [Example A]
target
= browsing context name or keyword ( _blank, _self, _parent, or _top)
The value of the target attribute is used as the default when hyperlinks and forms in the Document cause navigation.
The example shows a link with the relative destination some-file.html that gets rewritten to http://example.org/deep/some-file.html
<!DOCTYPE html>
<html>
<head>
<title>base element example</title>
<base href="http://www.example.org/deep/">
</head>
<body>
<p>A <a href="some-file.html">relative link</a>.</p>
<p>A <a href="http://www.example.org/deep/some-file.html">relative link</a>.</p>
</body>
</html>
The example shows that base only affects elements following it
<head>
<title>base element example</title>
<link href="my-style.css" rel="stylesheet">
<base href="http://example.com">
<link href="my-other-style.css" rel="stylesheet">
</head>
The example shows how multiple base occurrences are collapsed and ignored
<head>
<title>base element example</title>
<base href="http://example.com">
<base target="_blank">
<base href="http://webplatform.org" target="_top">
</head>
Notes
<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.<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.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.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4