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.
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=”http://www.w3schools.com/images/” /> 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=”http://www.w3schools.com/images/” />
<base target=”_blank” />
<img src=”stickman.gif” />
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