While writing a much larger piece about <head> element and its children, I found that I went on a minor tangent about the <base> element. That tangent ended up being much longer than I intended… so I ripped it out and here it is:

All your <base>

The <base> element is meant to be declared once in a document’s <head>. Its primary function is to specify the baseline URL for all relative links (e.g. href="page.html as opposed to href="https://mysite.com/page.html used throughout that document.

By default a relative URL maps to the current document’s parent directory.

For example:

<!-- when in the root of a website -->
<a href="about.html">
<!-- is equal to -->
<a href="http://mywebsite.com/about.html">

<!-- where as if this page was in a subfolder named "company" -->
<a href="about.html">
<!-- is equal to -->
<a href="http://mywebsite.com/company/about.html">

<base> is most useful on an as-needed basis, where a document may be located in a sub-directory of a website, and relative URLs need to be mapped to the site’s root URL, instead of the subdirectory that the current document resides in.

While in theory this sounds pretty straight forward, especially when taking its description at face value, you should be aware that <base> will affect any relative URL on a page, including but not limited to <script src="..."> and <link href="...">.

It’s imperative that this be kept in mind when using <base> as these important URLs would need to be updated to their full hard-coded web address, so as not to break if a new base URL was introduced.

One feature of <base> that isn’t overtly clear until implemented is that it can have a target attribute applied to it.

Applying a target should be done with caution, as the attribute’s value will be applied to all links on a page that don’t have their own target set. It matters not whether the link has a relative or absolute URL.

So declaring the following:

<base target="_blank" href="http://www.mysite.com/">

Means all of your navigation links will open in a new window. All links to other websites with, absolute URLs will open in a new window. Any and all links will result in a new window.

Gross…

To wrap up, declaring a <base> may have its uses, but before using it be absolutely sure it won’t break other URLs in your document.

And honestly, just don’t use the target attribute unless you are willing to set a target attribute for all the links in a document. It’s a dreadful bad idea and it’d likely annoy the living hell out of people if all links opened in a new window.

If this semi PSA has peaked your interest about this situationally useful HTML element, then you should check out this very long stack overflow discussion that was started in an effort to find merit for the <base> element.