Using <base href/> with Anchors
A <base href="homepage-url"/> tag in the header of the pages in your site is enormously convient for building sites which can be moved from one domain or location to another. Unfortunately, there is one downside - it breaks anchor links. In this blog I explain the whole problem with the base tag and show you how you get around the problem with broken anchor links.
The purpose of the <base/> tag is to specify the base location for resolving relative urls. It was only ever meant to be used for viewing a page where the document root is not available (for example, from an email) and should technically point to the actual document location, rather than the homepage. However, there are two significant advantages to the latter:
Any HTML purist and they'll tell you that using <base href="homepage-url"/> to artificially rewrite all your urls relative to your homepage or application context is abusing the intended use of the tag. Well, okay, so that's not what it was designed for, but I'm fairly certain HTML wasn't design to build applications like Google Maps either, but people did it anyway.Using <base href/> with Anchors
The Achille's Heel of the base href tag is that anchor links will all resolve to the homepage unless you include the relative path of the document also. For example, if the base href was http://www.example.com, notice how the following urls are resolved:
Relative URL Absolute URL Broken: #anchor http://www.example.com/app#anchor Corrected: page#anchor http://www.example.com/app/page#anchor
This doesn't cause a problem if you are happy to manually include the page location in each anchor link. For our CMS however, we wanted the editor to do this work for us and there are two problems with making this transparent to the user:
I am an artist, an engineer, and a student of life. Some projects I'm working on at the moment are The Game Of Your Life, Memory Genius and Money Talks. I write every Sunday about travel, psychology and technology. Click here to subscribe, or follow me via RSS, Twitter, Facebook, and even Google+.