1. Web Design
  2. HTML5

Quick Tip: Set Relative URLs With the “base” Tag

Read Time:4 minsLanguages:
This post is part of a series called Strange and Unusual HTML.
Quick Tip: Remember to Style Your ALT Text
Introducing the HTML5 “Menu” and “Menuitem” Elements

The <base> tag in HTML is a relatively little known element, having become a fully fledged part of HTML5 quite recently. It enables you to do two things:

  1. Set any URL you choose as the base for all relative URLs.
  2. Set default link targets.

The Base-ics

The <base> element is defined in the <head> section and you can only use it once per document. You should place it as early as possible in your head section so you can use it from that point on. Its two possible attributes are href and target. You can use either of these attributes alone or both at once.

Example 1: Asset Loading Shortcut

Let's say you have a site which stores all its images and CSS in a folder named "assets". You might define your <base> tag like so:

This would then allow you to load in any images or CSS like this:

The link to style.css would resolve to and image01.png would load from

Example 2: Internal Page URLs

What if you have a top level domain which redirects to something like and all internal links need to include app/ in their URLs.

You might set your base URL like this:

From there whenever you wanted to link from one internal page to another you could simply use:

This link would resolve to

Example 3: Default Link Target

You can also use <base> to set the default target for all links on your page. If you were to use:

...any link that didn't explicitly set its own target would open in a new window. You can use the target attribute with or without an accompanying href attribute.

This functionality could potentially be useful for content loaded in via an iFrame, as you would be able to automatically have all links therein targeted to the parent frame.


While the <base> url can be handy, its drawbacks center around the fact that after defining it once you're stuck with it. You can only use it in a single way and it will then affect all URLs. Wherever you don't want to use the defaults set in your <base> tag you have to specifically override them.

Should you use it to resolve to your assets folder as we did above, and you later wanted to link from one page of your site to another, you couldn't do so with the common HTML of <a href="page.html">Page</a>

This is because with the base URL being your visitors would be sent to

As such you would have to override your <base> tag settings by using the absolute URL instead, i.e. <a href="">Page</a>.

In-Page Anchors

When using <base> you can also run into problems linking to in-page anchors.

Normally, a link such as <a href="#top">Back to Top</a> would keep you on the same page but skip to the location of an element bearing id="top", e.g. it would resolve to

However if you're using a <base> tag with an href attribute you'd instead be sent to the base URL with #top appended to the end, e.g.

Again, in this case you'd have to override the defaults set in your <base> tag by specifying the page you want your link to be relative to, e.g. <a href="article.html#top">Back to Top</a>.

Where <base> Works Best

The <base> tag is best used in a scenario where you know you'll be able to exert complete control over the use of all URLs, i.e. you know you'll be able to override the defaults as required. If you're creating a theme for a CMS where there are many unknown variables it's probably a good idea to leave <base> out of the mix.

However, if you're building a static HTML site <base> can be very helpful. This is the case even more so if you're using a templating language such as Jade or Handlebars that will let you place shortcuts like <a href="{url}#top">Back to Top</a>, so if you need to override default settings it's still quick and easy.

If you have a good idea what your project's content will be, and its use of URLs and links is fully under your control, you might find the <base> tag saves you a lot of time.

Read more about <base> at the W3C wiki and HTML5 spec:

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.