<base> - The Base URL Element

The `<base>` Element

Metadata HTML 2.0

The base element specifies a default URL and target for all relative URLs in a document. It acts as a foundation that all relative links, images, scripts, and stylesheets build upon.

Quick Example

<!DOCTYPE html>
<html>
<head>
<base href="https://example.com/blog/" target="_blank">
</head>
<body>
<!-- This links to https://example.com/blog/2024/article.html -->
<a href="2024/article.html">Read Article</a>

<!-- This loads from https://example.com/blog/images/photo.jpg -->
<img src="images/photo.jpg" alt="Photo">
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html>
<head>
<base href="https://example.com/blog/" target="_blank">
</head>
<body>
<!-- This links to https://example.com/blog/2024/article.html -->
<a href="2024/article.html">Read Article</a>

<!-- This loads from https://example.com/blog/images/photo.jpg -->
<img src="images/photo.jpg" alt="Photo">
</body>
</html>

Syntax

<base href="url">
<base target="target">
<base href="url" target="target">

The <base> element must be placed inside the <head> section and appears before any elements that use URLs. It’s a void element, meaning it has no closing tag.

Attributes

Attribute	Description	Values
`href`	Base URL for all relative URLs in the document	Absolute URL
`target`	Default browsing context for all links and forms	`_self`, `_blank`, `_parent`, `_top`, or frame name

Important Rules

Only One Base Element

A document can contain only one <base> element. If multiple <base> elements exist, only the first href and first target are used, and the rest are ignored.

Correct
Invalid

<head>
  <base href="https://example.com/" target="_blank">
  <!-- Other head elements -->
</head>

<head>
  <base href="https://example.com/">
  <base target="_blank"> <!-- Ignored! -->
  <base href="https://other.com/"> <!-- Ignored! -->
</head>

Must Be in the Head

The <base> element must appear inside the <head> section, before any elements with URLs or links.

Affects All Relative URLs

When present, the base element affects every relative URL in the document, including links (<a>), images (<img>), scripts (<script>), stylesheets (<link>), forms (<form>), iframes (<iframe>), and more.

Common Use Cases

Setting Base URL for Relative Paths

Perfect for documents served from different locations or for single-page applications:

<!DOCTYPE html>
<html>
<head>
<base href="https://cdn.example.com/assets/">
<link rel="stylesheet" href="styles/main.css">
<!-- Loads from https://cdn.example.com/assets/styles/main.css -->
</head>
<body>
<img src="images/logo.png" alt="Logo">
<!-- Loads from https://cdn.example.com/assets/images/logo.png -->

<a href="../index.html">Home</a>
<!-- Links to https://cdn.example.com/index.html -->
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html>
<head>
<base href="https://cdn.example.com/assets/">
<link rel="stylesheet" href="styles/main.css">
<!-- Loads from https://cdn.example.com/assets/styles/main.css -->
</head>
<body>
<img src="images/logo.png" alt="Logo">
<!-- Loads from https://cdn.example.com/assets/images/logo.png -->

<a href="../index.html">Home</a>
<!-- Links to https://cdn.example.com/index.html -->
</body>
</html>

Default Link Target

Make all links open in a new tab by default:

<!DOCTYPE html>
<html>
<head>
<base target="_blank">
</head>
<body>
<a href="https://example.com">Opens in new tab</a>
<a href="https://other.com">Also opens in new tab</a>

<!-- Override the base target for this link -->
<a href="https://same.com" target="_self">Opens in same tab</a>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html>
<head>
<base target="_blank">
</head>
<body>
<a href="https://example.com">Opens in new tab</a>
<a href="https://other.com">Also opens in new tab</a>

<!-- Override the base target for this link -->
<a href="https://same.com" target="_self">Opens in same tab</a>
</body>
</html>

Combining href and target

Set both the base URL and default target behavior:

<!DOCTYPE html>
<html>
<head>
<base href="https://docs.example.com/" target="_blank">
</head>
<body>
<nav>
  <!-- Links to https://docs.example.com/guide.html in new tab -->
  <a href="guide.html">Guide</a>

  <!-- Links to https://docs.example.com/api.html in new tab -->
  <a href="api.html">API Reference</a>

  <!-- Override: links to https://docs.example.com/home.html in same tab -->
  <a href="home.html" target="_self">Home</a>
</nav>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html>
<head>
<base href="https://docs.example.com/" target="_blank">
</head>
<body>
<nav>
  <!-- Links to https://docs.example.com/guide.html in new tab -->
  <a href="guide.html">Guide</a>

  <!-- Links to https://docs.example.com/api.html in new tab -->
  <a href="api.html">API Reference</a>

  <!-- Override: links to https://docs.example.com/home.html in same tab -->
  <a href="home.html" target="_self">Home</a>
</nav>
</body>
</html>

CDN Base URL

Serve static assets from a content delivery network:

<!DOCTYPE html>
<html>
<head>
<base href="https://cdn.mysite.com/v2.0/">
<link rel="stylesheet" href="css/theme.css">
<script src="js/app.js"></script>
</head>
<body>
<img src="images/hero.jpg" alt="Hero image">
<!-- All assets load from CDN -->
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html>
<head>
<base href="https://cdn.mysite.com/v2.0/">
<link rel="stylesheet" href="css/theme.css">
<script src="js/app.js"></script>
</head>
<body>
<img src="images/hero.jpg" alt="Hero image">
<!-- All assets load from CDN -->
</body>
</html>

Gotchas and Warnings

Fragment Links Behavior

Fragment identifiers (anchor links starting with #) are resolved against the base URL, not the current document URL. This can break in-page navigation.

Problem
Solution

<base href="https://example.com/docs/">

<!-- This tries to go to https://example.com/docs/#section2 -->
<!-- NOT the #section2 in the current page! -->
<a href="#section2">Jump to Section 2</a>

<h2 id="section2">Section 2</h2>

<base href="https://example.com/docs/">

<!-- Use the full current URL for fragment links -->
<a href="/current-page.html#section2">Jump to Section 2</a>

<!-- Or use JavaScript to get the current URL -->
<a href="" onclick="location.hash='section2'; return false;">
  Jump to Section 2
</a>

Single Base Element Limit

You cannot change the base URL or target partway through a document. Only the first base element counts.

<head>
  <base href="https://cdn1.example.com/">
  <!-- This second base is completely ignored -->
  <base href="https://cdn2.example.com/">
</head>

JavaScript URL Resolution

JavaScript methods like new URL(relativeUrl, document.baseURI) respect the base element. Be aware when manipulating URLs in scripts.

// If <base href="https://example.com/app/">
const url = new URL('page.html', document.baseURI);
console.log(url.href); // "https://example.com/app/page.html"

Server-Side vs Client-Side Considerations

When using base elements with single-page applications or client-side routing, be careful about how routes are resolved. The base URL affects fetch requests, dynamic imports, and history API operations.

<!-- In an SPA, this affects router behavior -->
<base href="/app/">

<script>
  // fetch() uses the base URL
  fetch('data.json') // Fetches from /app/data.json

  // Router pushState is affected
  history.pushState({}, '', 'page') // Goes to /app/page
</script>

Form Action URLs

The base element affects form submission URLs too:

<base href="https://example.com/api/">

<!-- Submits to https://example.com/api/submit -->
<form action="submit" method="POST">
  <button>Submit</button>
</form>

When to Avoid the Base Element

Consider avoiding the base element in these scenarios:

Multiple base URLs needed. If different sections of your page need different base URLs, the single base element limitation makes this impossible. Use absolute URLs instead.

In-page navigation is critical. Sites with extensive anchor link navigation (like documentation sites) may find the fragment link behavior problematic.

Third-party scripts. External scripts might not expect a base element and could break when resolving their own relative URLs.

Development vs production complexity. Managing different base URLs between environments can add configuration complexity. Environment variables in your build process might be simpler.

Accessibility Considerations

The base element has no direct accessibility impact since it doesn’t render visible content. However, its effects can indirectly affect accessibility:

Screen reader navigation. When links open in new tabs due to target="_blank", always inform users explicitly in the link text, not just through the base element.

Keyboard navigation. Users navigating by keyboard need consistent behavior. Unexpected new tab openings (from base target) can be disorienting.

Link purpose clarity. The base element can obscure where links actually go. Ensure link text and context make the destination clear, especially when the visual URL differs from the resolved URL.

Good
Missing Context

<base target="_blank">

<a href="report.pdf">
  Annual Report (opens in new tab, PDF)
</a>

<base target="_blank">

<a href="report.pdf">Annual Report</a>
<!-- User doesn't know it opens in new tab -->

Browser Support

Browser	Version	Notes
Chrome	1+	Full support
Firefox	1+	Full support
Safari	1+	Full support
Edge	12+	Full support
IE	5.5+	Full support

The <base> element has been supported since the earliest browsers. The target attribute is supported in all browsers that support frames and tabs.

Container for document metadata where base elements must be placed. Learn more →

Anchor elements for hyperlinks, affected by base href and target. Learn more →

Links to external resources, affected by base href for relative URLs. Learn more →

<base> - The Base URL Element

The <base> Element

Quick Example

Syntax

Attributes

Important Rules

Only One Base Element

Must Be in the Head

Affects All Relative URLs

Common Use Cases

Setting Base URL for Relative Paths

Default Link Target

Combining href and target

CDN Base URL

Gotchas and Warnings

Fragment Links Behavior

Single Base Element Limit

JavaScript URL Resolution

Server-Side vs Client-Side Considerations

Form Action URLs

When to Avoid the Base Element

Accessibility Considerations

Browser Support

Related Elements

Specifications

The `<base>` Element