Set Relative URLs With the “base” Tag
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:- Set any URL you choose as the base for all relative URLs.
- 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:
1
2
3
|
This would then allow you to load in any images or CSS like this:
1
2
3
4
5
6
7
| <head> <link rel="stylesheet" href="style.css"></head><body> <img src="image01.png" /></body> |
The link to
style.css would resolve tohttp://www.myepicsite.com/assets/style.css and image01.png would load fromhttp://www.myepicsite.com/assets/image01.png.Example 2: Internal Page URLs
What if you have a top level domain which redirects to something like
http://thisrocks.com/app/ and all internal links need to include app/ in their URLs.
You might set your base URL like this:
1
|
From there whenever you wanted to link from one internal page to another you could simply use:
1
| <a href="anotherpage.htm">LINK</a> |
This link would resolve to
http://thisrocks.com/app/anotherpage.htm.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:
1
| <base target="_blank"> |
...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.
Drawbacks
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
http://www.myepicsite.com/assets/ your visitors would be sent to http://www.myepicsite.com/assets/page.html.
As such you would have to override your
<base> tag settings by using the absolute URL instead, i.e. <a href="http://www.myepicsite.com/page.html">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 http://thisrocks.com/app/article.html#top.
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.http://thisrocks.com/app/#top.
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>.
Comments
Post a Comment