The Pros and Cons of the base Tag

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.

Enter the base tag

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.

The 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 base tag

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.

In closing…

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.