It is used to specify the base URL used in all relative URLs of a document and/or the default target attribute. It must therefore have at least one href or target attribute defined, being able to have both.
There can only be one <base> element per document and it has to be inside the <head>. If there is more than one, only the first href and target will be taken into account, the rest will be ignored.
If either of these two attributes is defined, the <base> element must appear before other elements with attribute values that contain URLs, such as a <link href = "">.
It has two attributes:
-
href: the base URL that will be used throughout the entire document in relative URLs. It can take the value of an absolute or relative URL. -
target: a keyword that defines the navigation context in which to display the navigation results of<a>,<area>and<form>elements that do not have atargetattribute explicitly defined. It can have the following values:-
_self: shows the result in the same navigation context. It is the default value. -
_blank: displays the result in a new, unnamed navigation context. -
_parent: shows the result in the navigation context of the parent of the current one if the current page is within a frame. If there is no parent, it acts the same as_self. -
_top: shows the resource in the highest navigation context that is an ancestor of the current one. If there is no parent, it acts the same as_self.
-
Internal links to a document fragment, for example <a href="#id-example"> are resolved using <base>, triggering an HTTP request to the base URL with the fragment appended. For instance:
- Given
<base href = "https://example.com"> - ...and this link:
<a href="#anchor">Anchor</a> - ...the link points to
https://example.com/#anchor
Open Graph tags don't recognize the <base> element, so they should always have absolute URLs. For instance:
<meta property="og:image" content="https://example.com/thumbnail.jpg">
- Type: -
- Self-closing: Yes
- Semantic value: No
Top comments (0)