The Base Element
The <base> element sets a document-wide base URL that every relative URL on the page resolves against — links, images, forms, scripts, stylesheets, anything with a relative href or src.
Basic syntax
<head> <base href="https://example.com/docs/" /> </head> <body> <!-- resolves to https://example.com/docs/guide.html --> <a href="guide.html">Guide</a> </body>
Without the base tag, that same link would resolve relative to the current page's own URL instead.
The target attribute on base
base can also set a default target for every link and form on the page that doesn't specify its own target attribute.
<base href="https://example.com/" target="_blank" /> <!-- opens in a new tab, inheriting the default target --> <a href="/pricing">Pricing</a> <!-- explicitly overrides the default --> <a href="/about" target="_self">About</a>
One-per-document rule
A document may contain at most one base element.
If more than one is present, only the first one's href and target are used; the rest are ignored.
It must appear inside the head, and before any element that references a relative URL (typically the first element in head).
<head> <meta charset="UTF-8" /> <base href="https://example.com/app/" /> <!-- link/script tags below now resolve against the base --> <link rel="stylesheet" href="styles.css" /> </head>
Common gotchas
Gotcha | Why it happens |
|---|---|
Fragment links break (#section jumps to the wrong page) | A bare href="#section" is resolved against the base href, not the current page, in some contexts |
Relative images/scripts suddenly 404 | Every relative URL on the page is affected, not just links — easy to forget when adding base later |
Absolute-looking paths still behave oddly | Root-relative URLs like /about are NOT affected by base — only truly relative URLs like about or ../about are |
Only the first base is honored | Duplicate base tags silently do nothing beyond the first |
<base> tag to an existing page can silently break every relative link, image, and script reference on it. Audit all relative URLs on the page before introducing one./) are resolved against the origin, not the base href — so /logo.png is unaffected by a base element, while logo.png is.