The Pros and Cons of the base Tag
Published 7 years 5 months ago on November 13, 2006 — 4 min read
Structuring your links is a very important part of developing any website. First and foremost, they need to work. Secondly it should be possible to move the entire website to a new location at any time, for any number of reasons; the client wishes to take their website for personal reasons, you’re moving the site to a new and improved server, or any number of reasons. Having to go through the entire site and rip out inapplicable URIs (either using regex or sitewide find and replace) isn’t in your best interest.
A tip for document portability
One way to avoid having to check for bad links through an entire website after it was moved would be to mark up the document in such a way where the URIs are not dependent on where they reside. For instance, using absolute URIs which include the current domain of the site. It’s not often that a site domain would change, but in the case of changing servers, you might want the links to be pointing to your development URI for testing purposes.
Instead of including the site domain in various links within a document, you could include the domain in the
base tag found in the
head of your document. The
base tag is defined by the W3C as:
In HTML, links and references to external images, applets, form-processing programs, style sheets, etc. are always specified by a URI. Relative URIs are resolved according to a base URI, which may come from a variety of sources. The BASE element allows authors to specify a document’s base URI explicitly.
When present, the BASE element must appear in the HEAD section of an HTML document, before any element that refers to an external source. The path information specified by the BASE element only affects URIs in the document where the element appears.
base tag allows authors to define from which URI all links should originate. In my eyes this can be both a good and a bad thing. On one hand, your document is now portable in that you can control the root URI for the entire page simply by managing the value of the
href attribute within the
base tag. On the other hand, you can lose the ability to structure (true) relative URIs in certain circumstances. Essentially, the
base tag treats relative URIs as absolute URIs by adding it’s
href value to any relative URI.
For example, I was getting started on a particular site that had three major ‘sections’, and it seemed fitting to store the markup for each section in it’s respective folder. Not only does that help me with organizing the markup, it would give the possibility to setup subdomains for the folders and help the company out with SEO. As I was testing the initial structure of the site, I discovered that some of the site navigation was no longer functional. The site is run using a template server side, so at first I couldn’t figure out why site navigation links would work on one page, but not the next. As it turned out, there was a
base tag included in the template that I had overlooked. It was interfering with the folder structure of some links because that
base tag was included with the header file of the template I was working on and not including an additional folder in the path if applicable. Removing the
base tag solved the problem.
Personally, I prefer the ability to use true relative URIs anywhere I please, and manage a pseudo
base URI using a variable defined server side. In a sense, it’s using the idea of the
base tag, while not limiting yourself in such a way as described above.
Other shortcomings of the
Interestingly enough, Roger Johansson discovered a nasty IE6 bug associated with
base elements. He notes that if a
base element is present, it makes selecting text quite a challenge in Internet Explorer. Roger’s solution was also to remove the element itself, as it was only included due to the CMS he was using. While not a huge disaster, something like that wouldn’t sit well with me and prove to be quite an annoyance.
I’ve also read that it was possible in IE6 to define multiple
base tags, treating them as code blocks within a document. Technically you could have different
base hrefs defined in various sections of your document and they would behave as such in Internet Explorer. Thankfully, IE7 doesn’t sport this “feature” and will only use the
base as expected.
All in all, I think that the
base tag could prove to be a valuable resource, but in my personal use, it can prove to be a nuisance. Just about every site I develop is using some sort of server technology to control a template for the site, which helps to cut down on development time. The presence of a
base element has more than once caused a few moments of confusion and frustration for me. The root URI is defined as a server side variable in the majority of my projects, and using that as opposed to a
base has proven to be much more useful.