<base> Base URL
Sets the base URL and default target for all relative links on a page.
<base> is a void element that sits in the head. Its href changes how every relative URL on the page resolves, and its target gives links and forms a default target.
A page may have one base element, and it has to come before any other element that uses a URL. Reach for it rarely. It touches every link, in-page ones like #top included, and those then point at the base URL instead of the current page.
How it changes the document base URL is spelled out in the base element definition (opens in a new tab). To see how URLs resolve without it, work through the Relative and Absolute Paths lesson.
Void element: it has no content and no closing tag.
Syntax
<head>
<base href="https://example.com/docs/" target="_top">
</head>When to use it
Base is a niche tool. It earns its place when a page is served from one address but its relative URLs must resolve against another, as with a saved offline copy of documentation, or when a page inside an iframe should open every link in the full window with target="_top".
On a normal website, root-relative paths like /images/logo.svg are almost always better. They work from any folder and leave every other URL on the page alone. If only one link should open elsewhere, put target on that <a>, as the link target lesson shows.
Base reaches further than links. It also changes the URLs of images, stylesheets, scripts, form actions and url() values inside style blocks. Add a base tag to an existing site and all of them can break at once, while the source still shows the familiar relative paths. That makes the cause hard to spot. Test every resource after adding one.
Attributes
| Attribute | What it does |
|---|---|
href | Base URL used to resolve relative URLs. |
target | Default browsing context for links, such as _blank. |
Live example
Edit the code and watch the preview.
<head>
<base href="https://example.com/docs/">
</head>
<p><a href="intro.html">This link goes to https://example.com/docs/intro.html</a></p>More examples
Breaking out of an iframe
This page is meant to be shown inside an iframe, such as a help widget. target="_top" on the base makes every link replace the whole browser window instead of loading inside the small frame, without adding target to each link.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<base target="_top">
<title>Help widget</title>
</head>
<body>
<p>Need more help?</p>
<ul>
<li><a href="https://sunny.example/faq/">Read the FAQ</a></li>
<li><a href="https://sunny.example/contact/">Contact us</a></li>
</ul>
</body>
</html>Forms follow the base too
The base URL affects more than links. The form action search resolves to https://shop.example/store/search, and the cart link to the same folder. Submit the form in the preview to see the full address the data would be sent to.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="https://shop.example/store/">
<title>Store search</title>
</head>
<body>
<form action="search">
<label for="q">Find a product</label>
<input id="q" name="q" value="flour">
<button>Search</button>
</form>
<p><a href="cart.html">View cart</a></p>
</body>
</html>Tip: Leave base out unless you have a real reason. It rewrites every relative link.
Browser support
Base has worked the same way in every browser since the early days of HTML, href and target included. Only the first base element with an href sets the document base URL. Any later ones are ignored, and that is why the standard allows just one per document.
Accessibility
Skip base target="_blank". Sending every link to a new window with no warning confuses screen reader and keyboard users. The W3C note Understanding Change on Request (opens in a new tab) explains why new windows should never open by surprise.
Common mistakes
Wrong
<link rel="stylesheet" href="a.css">
<base href="/assets/">Right
<base href="/assets/">
<link rel="stylesheet" href="a.css">Place base before any element whose URL you want it to change.
Frequently asked questions
What does the base tag do in HTML?
Two things. <base href="..."> sets the URL that every relative URL in the document resolves against, whether it belongs to a link, an image, a script or a stylesheet. <base target="_blank"> sets the default browsing context for links and forms. You get one <base> per page, and it must sit in the head before any element that uses a URL. For the exact resolution rules, see the WHATWG URL Standard (opens in a new tab).
Why do fragment links break when I use the base tag?
Because href="#top" is a relative URL. It resolves against the base URL instead of the current page, so if the base points to another folder, clicking the link loads that folder and nothing scrolls. Write the full page path in front of the fragment, or drop <base> altogether.