The <base> element
The <base> tag sets the starting URL that every relative link, image and script on the page is resolved against, and can set a default target for all links. A page may have only one, placed in the <head> before anything that uses a URL. Use it with care: it also changes where #section links point.
Last updated: October 3, 2026
Quick facts
| Category | Metadata content |
| Content model | Empty — it’s a void element |
| Tag omission | Void element — no end tag, ever |
| Permitted parents | A <head> element, with no other <base> on the page |
| DOM interface | HTMLBaseElement |
Syntax
Live example
Edit the code below and watch the preview update instantly.
Attributes
| Attribute | Description |
|---|---|
| href | The base URL that relative URLs on the page are resolved against |
| target | The default place links open, e.g. _blank for a new tab, unless a link sets its own |
Common examples
A base URL for relative links
All relative links and images now resolve from the base address.
A default link target
Every link without its own target opens in the named frame or tab.
Fixing a #link after adding base
Hash links resolve against the base too, so include the page path or use JavaScript.
<base> vs root-relative URLs
<base> changes how every relative URL on the page is resolved — links, images, stylesheets, scripts and form actions. That’s powerful, but easy to forget, and it causes confusing bugs later.
Root-relative URLs, starting with a slash (/images/logo.png), always point to the same place from any page, with no hidden setting. For most websites, root-relative URLs are simpler and safer; base is mostly useful for documents moved between locations, such as saved pages or email-like HTML.
| <base> | Root-relative URLs | |
|---|---|---|
| Affects | Every relative URL | Just that URL |
| Risk of surprises | High | Low |
| Typical use | Portable documents | Most websites |
Common mistakes to avoid
- Placing base after other links in the head. It must come before any element that uses a URL.
- Forgetting the trailing slash.
href="/docs"resolves relative links against/, not/docs/. - Using
target="_blank"for every link. Opening everything in new tabs annoys visitors and can break the back button. - Forgetting that #anchor links change. They jump to the base URL instead of the current page.
Accessibility & SEO tips
- Canonical and alternate links should use full absolute URLs anyway, so base doesn’t affect them.
- A wrong base URL can make every image and stylesheet fail at once — test the whole page after adding one.
- Search engines respect base when following relative links, so a mistake can create many broken URLs in their eyes.
- If you inherit a page that uses base, check every link, image and form after any change to the site structure — it’s the first place broken URLs come from.
Browser support
Supported in every browser, including Chrome, Edge, Firefox, Safari and their mobile versions — it has been part of HTML since the very first versions.