DEV Community

Cover image for HTML tags | base
Carlos Espada
Carlos Espada

Posted on

HTML tags | base

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 a target attribute 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:

  1. Given <base href = "https://example.com">
  2. ...and this link: <a href="#anchor">Anchor</a>
  3. ...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

Definition | Example | Support

Discussion (0)