href (HTML attribute)

Description

If all links (a) or form submissions (action) are going to the same location, you may prefer to define the base URL to avoid repeating yourself unnecessarily. The example below illustrates the kind of time saving that this approach can achieve:

I've published my
    <a href="http://lloydi.com/travel-writing/">holiday
    diaries</a>, including the <a href="http://lloydi.com/
➥travel-writing/prague/2006/day2.html">crazy bone church at Kutna
    Hora</a>, and our recent trip to <a href="http://lloydi.com/
➥travel-writing/portugal/algarve/day1.html">Portugal</a>.

Given that all the links are in the directory "travel-writing" on the domain "lloydi.com", the base href can be used to reduce the markup as follows:

<base href="http://lloydi.com/travel-writing/"/>
⋮
I've published my
   <a href="./">holiday diaries</a>,
    including the
    <a href="./prague/2006/day2.html">
    crazy bone church at Kutna Hora</a>, and our recent trip to
    <a href="./portugal/algarve/day1.html">
    Portugal</a>.

Note that the syntax dictates that the a element’s href values begins with "./".

There’s one flaw with using the base element for this purpose, though. Consider a scenario in which you set a base href to be a domain root, like so:

<base href="http://example.org/">

Then, in the document, you have a link to a fragment identifier called foo: a section within the same page that you’d like the user to be able to jump to:

<a href="#foo">Foo</a> links to foo
⋮
<h1 id="foo">Foo</h1> here is the desired destination

The problem is that the browser won’t jump to that section on the page; instead, it will load the URL http://example.org/#foo.

So while the base element may have its uses, you must be careful to avoid a situation like this. Using a base href value may be akin to using a sledgehammer to knock in a nail.

Value

The value in the base href must be an absolute URI that acts as the base URI for resolving relative URIs, such as "http://www.domain-name.com/".

Compatibility

It causes no compatibility issues, and has excellent support across all tested browsers.