Web Development: HTML Element: base

HTML Element: base

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 elsewhere in the document.

Syntax

1	<base href="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	<base href="url "target="_blank" />

Example

Here is an example of how the <base> element can be used in an HTML document:

<!DOCTYPE html>
<html>
  <head>
    <base ref="https://example.com/" />
    <title>My Page</title>
  </head>
  <body>
    <p><a href="about.html">About</a></p>
    <p><a href="contact.html">Contact</a></p>
  </body>
</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:

area
base
br
col
command
embed
hr
img

input
keygen
link
meta
param
source
track
wbr

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 href or target attributes are specified, this element must come before all other elements which use URLs.
The href attribute 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:

<base href="https://www.example.com/blog/" />
<img src="image.png" /> 
<!-- resolves to https://www.example.com/blog/image.png -->


<base href="https://www.example.com/blog" />
<img src="image.png" /> 
<!-- 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.

Official W3C specification <base>

Web Development

Wednesday, May 3, 2023