The Amazing Power of the BASE Tag

I’m not one to normally get excited about HTML tags, but I’m making an exception in this case.

Raise your hand if you’ve heard of the <base>  tag.
Anyone, anyone?

Don’t feel bad, I didn’t either until today – but I’m going to show you why I think it’s so flippin cool, especially for those of us who work with complicated root structures and CMS frameworks.

The humble little base tag is handy for at least 2 purposes that I know of.
If you use it for something else, I’d love you to leave a comment and let me know.

What does the <base> tag do?

1. Setting a default target for any links, including pdf downloads, etc.. that you place on the page. If you tire of putting the ‘target=”_blank” attribute after all your links, this baby’s for you. Creating a consistent experience for your users will help to give them piece of mind before they go clicking around…

2. Setting a default base path for any href on the page. e.g. if you include <base href=”; /> on your page, you no longer have to link to your images with that ‘/images/’ path, instead you can simply put <img src=”myImage.jpg” width=”20″ height=”20″ alt=”blahblahblah” /> and the image will appear like normal.

Now you may be saying, big deal – and maybe it’s NOT  a big deal for many people. But when you’re dealing with a backend where your links references look like this: “/Portals/7/tabid/articlebin/posts/images/image.jpg” or something similar, you’ll probably appreciate it much, much more. I often find myself opening another browser just so I can look at the image properties for a site I’m working on, to make sure I’m correct.

How to implement-

simply put the <base> tag in between the <head></head> section of your page like you would any other script or meta tag. (note: you’ll need to self close the tag if you’re using XHTML)

Here’s an example as shown on the w3c site:

<base href=”; />
<base target=”_blank” />

<img src=”stickman.gif” />
<a href=””>W3Schools</a&gt;

According to google, the <base> tag works fine with the new ‘rel=canonical’ tag also.  Note that if you click the image properties, the complete pathway will still be