<base>
The <base> HTML element specifies the base URL to use for all relative URLs in a document. There can be only one <base> element in a document.
A document's used base URL can be accessed by scripts with Node.baseURI. If the document has no <base> elements, then baseURI defaults to location.href.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 3 | 18 | 2 | |
| HTML attribute | ||||||
href | 1 | 12 | 1 | 3 | 18 | 2 |
href (forbid data javascript urls) `data:` and `javascript:` urls are not allowed | 58 | 79 | 127 | 13.1 | 58 | 13.4 |
href (relative url) Relative URIs. | 1 | 12 | 4 | 3 | 18 | 2 |
target | 1 | 12 | 1 | 3 | 18 | 2 |
| DOM API | ||||||
| The HTMLBaseElement interface contains the base URI for a document. This object inherits all of the properties and methods as described in the HTMLElement interface. | 1 | 12 | 1 | 3 | 18 | 1 |
| The href property of the HTMLBaseElement interface contains a string that is the URL to use as the base for relative URLs. | 1 | 12 | 1 | 3 | 18 | 1 |
| The target property of the HTMLBaseElement interface is a string that represents the default target tab to show the resulting output for hyperlinks and form elements. | 1 | 12 | 1 | 3 | 18 | 1 |
Syntax
<head>
<base href="https://example.com/" target="_blank">
</head>
<!-- 相対パスはすべて https://example.com/ を基準に解決される -->Live demo
Relative URL resolution
Show how a base URL changes the destination of relative links and assets.
Single base reminder
A document should carry at most one base element, because it rewrites every relative URL on the page.
Safe base checklist
Document the main checks before adding a base URL to a document.
Use cases
-
Shared relative paths
Set a common base when many links or assets in a document need to resolve from the same location.
-
Generated documents
Templates or exported HTML files can use a base element to keep relative references working after deployment.
Cautions
- A single base element changes how every relative URL resolves, so mistakes can affect the whole document unexpectedly.
- It is easy to make links harder to debug when the actual resolved destination is no longer obvious in markup.
Accessibility
- Broken links and asset paths harm accessibility quickly, especially when they remove styles, controls, or help content.
- Prefer explicit, reliable linking if the document must remain understandable in multiple contexts.