href (HTML attribute)
all links (
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
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
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
href values begins with
There’s one flaw with using
base element for this purpose, though. Consider a
scenario in which you set a
href to be a domain root, like so:
Then, in the document, you have a link to a fragment identifier
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
So while the
base element may have its uses, you must be careful to
avoid a situation like this. Using a
href value may be akin to using a sledgehammer to
knock in a nail.
The base URL is defined here as a domain:
<base href="http://lloydi.com"/> ⋮ <p> I've published my <a href="/travel-writing/">holiday diaries</a>, including the <a href="/travel-writing/prague/2006/day2.html"> crazy bone church at Kutna Hora</a>. </p>
The value in the
href must be an absolute
URI that acts as the base URI for resolving relative URIs, such as
It causes no compatibility issues, and has excellent support across all tested browsers.
There are no comments yet.