Syntax
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 |
<base href="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 |
<base ref="https://example.com/" /> |
5 |
<title>My Page</title> |
6 |
</head>
|
7 |
<body>
|
8 |
<p><a href="about.html">About</a></p> |
9 |
<p><a href="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 does not accept any content and is a self-closing tag.
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. - 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 |
<base href="https://www.example.com/blog/" /> |
2 |
<img src="image.png" /> |
3 |
<!-- resolves to https://www.example.com/blog/image.png -->
|
4 |
|
5 |
|
6 |
<base href="https://www.example.com/blog" /> |
7 |
<img src="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
Did you know? The <base> element was introduced in HTML 4.0 in 1998.