The HTML <base> element provides the base URL for all relative URLs within a document. It’s usually placed inside the <head> section and should appear only once in an HTML document.
Relative URLs can be found in the href attributes of <a>, <area>, and <link> elements, plus src attributes of (for example) <img> elements elsewhere in the document.
Syntax
1 | <basehref="url"/> |
The url value in the above example should be replaced with the absolute URL for the document. It is also possible to include the target attribute, which specifies the default target for all links in the document. The syntax for this is:
1 | <basehref="url "target="_blank"/> |
Example
Here is an example of how the <base> element can be used in an HTML document:
1 | <!DOCTYPE html> |
2 | <html> |
3 | <head> |
4 | <baseref="https://example.com/"/> |
5 | <title>My Page</title> |
6 | </head> |
7 | <body> |
8 | <p><ahref="about.html">About</a></p> |
9 | <p><ahref="contact.html">Contact</a></p> |
10 | </body> |
11 | </html> |
In this example, the base URL for all relative URLs in the document is set to https://example.com/. Therefore, when a user clicks on the About or Contact links, they will be directed to https://example.com/about.html and https://example.com/contact.html respectively.
Attributes
The <base> element has two attributes:
href: This attribute specifies the base URL for all relative URLs in the document.target: This optional attribute specifies the default target for all links in the document. Possible values include_blank,_self,_parent, and_top.
Content
The base element is a void element, which means it supports no content model and you can’t pass it any type of content.
Here’s a list of all void elements:
Usage Notes
- If the
<base>element is not present in a document, the base URL is assumed to be the URL of the current document. - If the
hrefortargetattributes are specified, this element must come before all other elements which use URLs. - The
hrefattribute in the<base>element can be either an absolute URL or a relative URL, but it must be absolute if the document is being served from a file system rather than a web server. - Be sure to add a trailing slash to the URL you’re using, unless you’d like the last part of the URL to be stripped. For example:
1 | <basehref="https://www.example.com/blog/"/> |
2 | <imgsrc="image.png"/> |
3 | <!-- resolves to https://www.example.com/blog/image.png --> |
4 | |
5 | |
6 | <basehref="https://www.example.com/blog"/> |
7 | <imgsrc="image.png"/> |
8 | <!-- resolves to https://www.example.com/image.png --> |
Kezz Bracey goes into more depth, explaining what we can and can’t do with <base> in How to Use the HTML “base” Tag.
Learn More
<base> element was introduced in HTML 4.0 in 1998.
