The Pros and Cons of the base Tag

Posted: November 13, 2006 Comments(14)

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.

Get my newsletter

Receive periodic updates right in the mail!

  • This field is for validation purposes and should be left unchanged.

Comments

  1. I never use the base tag. I simply write relative URLs where appropriate, and if I really need to get to the root of a site, I just use href=”/…” with the starting slash of course meaning “site root.”

  2. @Nathan Smith: I’m with you on that one. Getting to the site root is easy enough by incorporating the leading slash in any URL.

  3. The base tag can also be used for sites that use Flash remoting. There are cross domain issues. For example, if a Flash piece is dynamically importing a list of images and connecting to http://www.whatever.com when the user went to whatever.com instead, the remoting won’t work. Including the base href tag fixes this issue.

  4. @Chad: I hadn’t really thought about that before as I don’t have much experience with Flash remoting. I wonder if, depending on the server platform of course, if it would be possible to avoid such an issue by using something such as .htaccess to redirect any misguided requests like that.

  5. I like to simulate a base tag but leave it flexible enough to allow relative links by the client. I do this by using an echo to call the domain and manually insert it to links that are doubtful to change after I hand the site over to a client. works very well if php is an option. there’s more about this on my website: http://blogs.lib.ncsu.edu/page/cadence

  6. The base tag can come in handy when a server’s file structure and site architecture is complicated (read: screwy). I have one client who is part of a major university where their URL/domain name is just so convoluted (60 characters long). It just made life easier to include a base tag in the header when developing and maintaining the site.

  7. @Choke: Yes I’m sure in certain situations base could save the day. I’m sure there will be times when I’m in a very similar situation, and base will make my life a whole lot easier.

  8. When doing development work, I will sometimes save the the view-source of the page to my local drive. Then, throw in a BASE tag to point my local page back to the original site just to make the images pop-back into place. It allows me to hack-around with the page and test my own features without having to have every dependent asset of the file downloaded to my local disk.

  9. @bkwdesign: That’s a good example to use for a pro of the base tag. Personally I often find myself using server-side variables to define the base URL and include that where applicable.

  10. Nathan wrote “I just use href=”/…” with the starting slash of course meaning “site root.”
    The problem as I see is that it is *not* the _site_ root but the _domain_ root, assuming that “site” means an internally coherent project that should be able to reside anywhere below the domain.
    The BASE tag denies us document-relative URLs but there is no tag in which to define the SITE for leading-slash URLs.
    They are forced to be non-portable instead of unconditionally convenient.

  11. Regarding BASE tags: I find them annoying but have discovered that they are very important. The pages in our Domain are regularly accessed by Wikipedia and dozens of other systems (which never ask permission to copy contents or pages!) but then when people try to access THEIR COPIES of our pages, the local addresses in our links get all screwed up. People were constantly trying to access pages of ours but which had additional “.php” added to URLs or added “This page explains Precession” added to the URL (without a hash mark so it causes failed URLs. Now I include BASE tags in all the pages, and the number of failed URLs has dropped to 1/10 of what it had been.

    If you have a comment, please sent an e-mail to me as I will never be back at your forum. (Sorry)

    Pastor Carl

  12. Added:

    A truly annoying part of using BASE tags is that tags which have the full HREF address make it so locally observing a page to edit it is difficult, as any graphics cannot appear off-line, and links do not work off-line

    Pastor Carl

Leave a Reply

Your email address will not be published. Required fields are marked *