HTML <base> Tag

The HTML <base> tag sets a single absolute (base) URL that the browser uses to resolve every relative URL in the document — links, images, stylesheets, scripts, and form actions. It can also set a default target so that links open in a particular window or tab without repeating target on each <a> element.

This page explains what <base> does, when it is genuinely useful, the attributes it accepts, and the important gotcha that catches most people the first time: how <base href> changes the behavior of same-page anchor links.

Why and when to use `<base>`

<base> shifts the "starting point" for relative paths. Without it, a relative URL is resolved against the document's own address. With it, every relative URL is resolved against the href you specify instead. That is occasionally exactly what you want:

Assets served from a CDN. If your markup uses relative paths like img/logo.png but the real files live on a CDN, a single <base href="https://cdn.example.com/assets/"> points all of them at the CDN without editing each path.
Site migrations and reverse proxies. When a document is moved or served under a different path than it was authored for, <base> can keep its relative links resolving to the original location.
Static-site generators and templating. A shared layout that is rendered at many URLs can declare one base so partials don't need to know how deep they are nested.

Use it sparingly. Because <base> affects every relative URL on the page at once — including ones you didn't write — it is a blunt instrument. Most modern projects prefer correct relative or root-relative paths, or a build step, over a global <base>.

Accessing the base URL from JavaScript

You can read the resolved base URL of a document with document.baseURI. If the document has no <base> element, this falls back to the document's own address (document.location.href).

// With <base href="https://www.w3docs.com/"> in the document:
console.log(document.baseURI); // "https://www.w3docs.com/"

Syntax

The <base> tag is a void element, which means that the closing tag isn’t required. In HTML5, the self-closing slash is optional, but in XHTML, the <base> tag must be closed (<base />).

Tip

Only one <base> tag can be used on the page, and it must be placed in the <head> element. You must insert it as soon as possible since its action extends from the place where it is specified.

Danger

If you use multiple <base> elements, only the first href and target attributes will be obeyed. The rest will be ignored.

Example of the HTML `<base>` tag

The following document sets both attributes at once. The base URL becomes https://www.w3docs.com/, so the relative link /css3-maker/border-radius resolves to https://www.w3docs.com/css3-maker/border-radius. And because target="_blank" is on <base>, the link opens in a new tab even though the <a> element itself has no target.

<!DOCTYPE html>
<html>
  <head>
    <title>HTML base tag</title>
    <base href="https://www.w3docs.com/" target="_blank" />
  </head>
  <body>
    <a href="/css3-maker/border-radius">Try CSS Maker Tool</a>
  </body>
</html>

Edit the snippet below: clicking the link opens w3docs.com in a new tab, driven entirely by the <base> tag.

Try it Yourself isn't available for this example.

Using `href` alone (the common case)

Most of the time you only want to redirect relative URLs, not change how links open. Set href and leave target off:

<head>
  <base href="https://cdn.example.com/assets/" />
</head>
<body>
  <!-- resolves to https://cdn.example.com/assets/img/logo.png -->
  <img src="img/logo.png" alt="Logo" />
</body>

Using `target` alone

You can set a default target without changing the base URL. Here relative URLs still resolve against the document's own address, but every link opens in a new tab:

<head>
  <base target="_blank" />
</head>
<body>
  <!-- no target attribute, yet opens in a new tab -->
  <a href="/pricing">Pricing</a>
</body>

Warning

When links open in a new tab via target="_blank", add rel="noopener noreferrer" on the <a> elements for security. <base> cannot set rel, so it has to live on each link. Without noopener, the opened page can access your page through window.opener and attempt tabnabbing.

Gotcha: `<base href>` breaks same-page anchor links

This is the most common surprise. A fragment link like <a href="#section"> is a relative URL — it is just a fragment with no path. When a <base href> is present, the browser resolves that fragment against the base URL, not against the current page.

So with <base href="https://www.w3docs.com/">, clicking <a href="#section"> does not scroll to the in-page element with id="section". Instead it navigates to https://www.w3docs.com/#section — usually a different page entirely.

<head>
  <base href="https://www.w3docs.com/" />
</head>
<body>
  <!-- BAD: navigates to https://www.w3docs.com/#contact -->
  <a href="#contact">Contact</a>

  <!-- GOOD: stays on the current page -->
  <a href="/current-page#contact">Contact</a>

  <h2 id="contact">Contact</h2>
</body>

The fix is to write same-page anchors as absolute or root-relative URLs that include the current page's path, so the fragment lands back on the right document. Read more about resolving paths in HTML File Paths.

Attributes

The <base> tag may contain either the href or target attribute, or both. If neither is specified, the tag has no effect.

Attribute	Value	Definition
href	absolute URL	The base URL for all relative URLs on the page. It should be an absolute URL (a relative value is unreliable and resolves against the document's own address).
target	browsing-context name	Default target for hyperlinks and forms. Accepts the four reserved keywords below, or the name of any browsing context (for example the `name` of an iframe or named window).

The reserved keyword values for target are:

Value	Definition
`_blank`	Opens the link in a new window or tab.
`_self`	Opens the link in the current window (the default).
`_parent`	Opens the link in the parent browsing context.
`_top`	Opens the link in the topmost (full) browsing context.

A custom name such as target="preview" targets a browsing context with that name — for example <iframe name="preview"> — and is created as a new window if none with that name exists.

Caveats and interactions

<link rel="canonical">. A canonical URL should be written as an absolute URL. Don't rely on <base> to turn a relative <link rel="canonical" href="..."> into the right address — make the canonical value absolute on its own. See <link>.
<form action="">. A form's action is resolved against the base URL too. An empty action="" normally submits to the current page; with a <base href> it submits to the base URL instead, which is rarely intended.
Placement matters. <base> only affects URLs that appear after it in the source. Put it at the very top of the <head>, before any <link>, <script>, or other URL-bearing element.

Practice

What does the HTML base tag do?

It sets the base URL for all relative URLs, and a default target for hyperlinks and forms, in the document.It is used to embed multimedia in a web page.It defines a set of navigation links.It only opens links in a new window and cannot change relative URLs.It adds a title to a web document.

Why and when to use <base>

Accessing the base URL from JavaScript

Syntax

Example of the HTML <base> tag

Using href alone (the common case)

Using target alone

Gotcha: <base href> breaks same-page anchor links