<base>
The <base> element defines the base URL used for relative URLs in a document. It affects links, assets, and other references that do not already use an absolute path.
Overview
The <base> element defines the base URL used for relative URLs in a document. It affects links, assets, and other references that do not already use an absolute path.
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 |
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 |
| Other | ||||||
html.elements.base.href.forbid_data_javascript_urls `data:` and `javascript:` urls are not allowed | 58 | 79 | 127 | 13.1 | 58 | 13.4 |
html.elements.base.href.relative_url Relative URIs. | 1 | 12 | 4 | 3 | 18 | 2 |
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.
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.
Related links
Powered by web-features