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.
Comments
Nathan Smith
November 14, 2006
4:58 pm
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.”
Jon Author
November 15, 2006
9:05 am
@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.
Chad
November 15, 2006
9:26 am
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.
Jon Author
November 20, 2006
1:12 am
@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.
Tim Wright
November 30, 2006
1:54 am
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
Choke
December 14, 2006
8:09 pm
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.
Jon Author
December 15, 2006
1:55 am
@Choke: Yes I’m sure in certain situations
basecould save the day. I’m sure there will be times when I’m in a very similar situation, andbasewill make my life a whole lot easier.bkwdesign
January 12, 2007
12:05 pm
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.
Jon Author
January 15, 2007
1:01 pm
@bkwdesign: That’s a good example to use for a pro of the
basetag. Personally I often find myself using server-side variables to define the base URL and include that where applicable.Zol
February 27, 2007
8:35 pm
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.
Picklewagon » The HTML tag
September 5, 2007
3:26 am
[…] The Pros and Cons of the base Tag […]