DEV Community

Cover image for HTML tags | base
Carlos Espada
Carlos Espada

Posted on • Edited on

1

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 and example | Support

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more