Jump to main content

Before declaring your <base>

  • Published:
  • Category: HTML

Safe, or Out?

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 was demanding just enough attention that it was receiving too much attention for what the scope of the article was meant to entail.

With that said, here is that tangent just so I feel less bad about editing it out of my other piece:


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="http://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 &lt;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 targetattribute 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 a hard coded target already set. It matters not whether the link is a relative or absolute.

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.


To wrap up, declaring a <base>may have its uses, but before using it, be absolutely sure you use it in a way that 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 pretty bad idea and I honestly can’t think of a single website where it wouldn’t 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 can check out this very long stack overflow discussion that was started in an effort to find merit in the <base>element.