HTML Base Tag

This is not really much of an extravaganza to get things going, but a few of the more interesting things (scripts) that will be posted here are still in their beta stages.

This first article is about probably the most undervalued of all HTML tags - the base element. The base element could be considered the most obscure HTML tag. It is not even one of the tags people are starting to use now more people are actually hand-coding HTML. This tag is so obscure and underused that several seasoned developers I have asked about the tag had never heard of it and when informed of its existence their first question was always 'Does it work in IE6?' As a long-standing member of the HTML family, support for the base tag is good. We have tested it on IE 3 - 7, Firefox, Opera and Konqueror without any issues. The only time I have ever seen this element used in Microsoft Outlook Web Access.

Anyway, enough of the guff. The base element is a self-closing HTML element that allows HTML documents to have a universal root path for all external media. Below is a brief demonstration on the base tag in use:

Other then the href attribute, the only other attribute supported by the base tag is the target attribute. This is handled the same as the target attribute on a hyperlink. So if you really want to you could force all hyperlinks to open in a new window. The only elements that take precedence over the base element's path are the object and depreciated applet elements.

A Few Other Notes on the Base Element

• It must be includes in the docuemnt's head, although IE6 < allows you to place it anywhere
• It support relative paths, e.g. href="../scripts"
• All URL's beginging with http:// or other protocols are ignored by base
• If you have a bandwith hungry site, using the base element could cut a kilobyte or two of each document

Adding A Bit of Server-side Scripting

If you are making a small web site there may be little use for the base element, but it can still be beneficial. The real benefit of base comes when you are creating a large site that has a lot external media - particularly if the site uses mod_rewrite or another URL re-writing engine. Anyone who is familiar with URL re-writing will probably know some of the problems you can run into; particularly if you are just slopping the site together. The main problem you will run into is the server being confused as to what directory it is in, so either your server wont be able to find the server-side scripts or it will be trying to access no existent external media (images, JavaScript etc.). You can use some scripting to overcome this, but it tends to be a bit bulky and may cause a few problems in future development. The simplest solution for URL re-writing issues is to use the HTML base element. Simply add the root path of your site in the base element and now you always know what path you access external media - no more ./../../../images/products/chairs/12_43_hfd.jpg! Below is how we structure our globals file for scaleable development using the Don't Repeat Yourself (DRY) principle.

Advantages of the Base Element

• Provides global access to the root path through HTML
• Can change all paths with one edit
• Results in reduced HTML
• Better facilitates URL re-writing

Disadvantages of the Base Element

When used in conjunction with Microsoft's Alpha Image Loader in external style sheets you will need to declare the source with the root path. If you use a relative path the image will not be loaded when outside the root, because the Alpha Image Loader ignores the base element's declaration. Cheers Bill!