Professional and Affordable Web Design

0800 080 5401

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:

Code Snippet

In the above instance we are setting the base path of external media (href & src) to So the css file included will actually be, the JavaScript file being includes will actually be and the hyperlink will point to and so on.

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.

Code Snippet

In the above instance, we first of all check what server we are on. This saves those pesky 'I forgot to change the globals' problems when you upload your site to the web. Depending on what server we are on a root path is defined, which is written to HTML with a templating engine. We also define the path where all programming and external media is stored, which saves having to go through every file to change paths if you ever need to change paths.

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!

Comments1 Comments


The base element supports only absolute paths. This is stated in and supported by my tests. Using relative paths failed in both Firefox 3.5 beta 4 and IE 8.

13 June 2009

All comments are moderated for spam and will not be shown. All genuine comments wil be show, however the links will be based on a NO FOLLOW RULE. Repeat commenters adding value to the articles and discusions will have removed alowing Follow Rule to Work.

Make a Comment

Notify me when someone responds

Quick Contact

See Full Portfolio Some Of Our Work

Screenshot of website

Driving Schools Booking Service (DSBS) is a network of driving instructors, covering the whole of the UK. For this project, we were...

Screenshot of website

County Security is a fully featured E - commerce solution, with an integrated "system configurator", which allows users to choose...

Customer News & Resources

At Mutiny Design we are constantly gathering together articles and help guides to assist our clients.

Introduction to sitemap.xml

Checking for a sitemap A site map (or sitemap) is a list of pages of a web site accessible to crawlers or users. It can be either a document in any form used as a planning tool for web design, or a web page that lists the pages on a web site, Some developers feel that site index is a more appropriately used term to relay page function, web visitors are used to seeing each term and generally associate both as one and the same. However, a site index is often an A-Z index that provides access to content, while a site map provides a general... Read More »

Center a web page in CSS

One simple way to center a web page using CSS is to create a container div, that is horizontally centered by having its left and right margins set to auto. Using this method, you can still apply colours / background images to the body tag, so its a flexible solution. (if you didnt need this ability, just apply margins and width to the body tag instead, and forget using the container div). The container div has the same width as your webpage and, well, contains it. All the code for your web page is placed inside the container div. This will... Read More »