<head>
  <base href="https://example.com/blog/">
</head>
<!-- Later in the page: -->
<a href="post-1">Post 1</a> <!-- resolves to https://example.com/blog/post-1 -->

Deep Dive Course

**`<base>`** is a void element placed in `<head>` that changes how every relative URL on the page is resolved — instead of resolving against the current page's own URL, they resolve against whatever `href` you set on `<base>`. There can be **at most one** `<base>` element per document, and it should appear before any other elements that reference URLs (like `<link>` or `<a>`), since it affects everything that follows.

1Understanding <base>

`<base>` is a void element placed in <head> that changes how every relative URL on the page is resolved — instead of resolving against the current page's own URL, they resolve against whatever href you set on <base>. There can be at most one <base> element per document, and it should appear before any other elements that reference URLs (like <link> or <a>), since it affects everything that follows.

💡

A single <base> tag affects EVERY relative URL on the page, including links, images, and form actions — it's easy to accidentally break unrelated links if you add one without auditing the whole page.

editor.html

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

localhost:3000

2Practical Example

Here is a real-world application of <base> showing how it is used in production HTML.

editor.html

<!-- Setting a base target so all links open in a new tab -->
<base href="https://example.com/" target="_blank">

localhost:3000

3Best Practices

Follow these guidelines when working with <base>:

1. Use <base> only when you deliberately need to redirect all relative URLs to a different root

2. Place it as early as possible in <head>, before other URL-referencing tags

3. Prefer explicit absolute or root-relative URLs over <base> in most cases — it's easy to introduce confusing bugs

⚠️

Tip: A single <base> tag affects EVERY relative URL on the page, including links, images, and form actions — it's easy to accidentally break unrelated links if you add one without auditing the whole page.

editor.html

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

localhost:3000

Examples

Example 01Basic Usage

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

Example 02Advanced Example

<!-- Setting a base target so all links open in a new tab -->
<base href="https://example.com/" target="_blank">

Best Practices

Use only when you deliberately need to redirect all relative URLs to a different root
Place it as early as possible in , before other URL-referencing tags
Prefer explicit absolute or root-relative URLs over in most cases — it's easy to introduce confusing bugs

Interview Question

Why is <base> considered risky to use, and how many can appear in a document?▼

Hint: Think about what happens to every single relative link, image, and form on the page.

Only one <base> element is allowed per document — browsers ignore any after the first. It's risky because it silently changes how EVERY relative URL resolves across the whole page (links, images, scripts, form actions), so a developer working on one part of the page might not realize a <base> tag elsewhere is redirecting their relative paths, leading to confusing 404s or requests to the wrong host.

Exercises

EasyPractice using <base> in a real scenario.

View Solution

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

Frequently Asked Questions

Why is <base> considered risky to use, and how many can appear in a document?▼

Only one element is allowed per document — browsers ignore any after the first. It's risky because it silently changes how EVERY relative URL resolves across the whole page (links, images, scripts, form actions), so a developer working on one part of the page might not realize a tag elsewhere is redirecting their relative paths, leading to confusing 404s or requests to the wrong host.

Related Functions

head-taga-taglink-tag