Is it recommended to use the <base> html tag?

Question

I just found out about the <base> HTML tag. I have never seen it actually used anywhere before. Are there pitfalls to its use that means I should avoid it?

The fact that I have never noticed it in use on a modern production site (or any site) makes me leery of it, though it seems like it might have useful applications for simplifying links on my site.

---

Edit

Conclusion: Probably should avoid it if you have an alternative. It could create subtle inconsistencies

There are some major gotchas with using the base tag that make it much less desirable than it first appears. Essentially, the changes to href='#topic' and href='' under the base tag are very incompatible with their default behavior, and this change from the default behavior could easily make third party libraries outside of your control very unreliable in unexpected ways, since they will logically depend on the default behavior.

I accepted the top answer before I had all the information, and after having used it myself for a few weeks, discovered the incompatibilities that make the base tag something that I recommend you DON'T USE, see my answer below for the details.

Answer 1

It's probably not very popular because it's not well know. I wouldn't be afraid of using it since all major browsers support it.

If your site uses AJAX you'll want to make sure all of your pages have it set correctly or you could end up with links that cannot be resolved.

Just don't use the target attribute in an HTML 4.01 Strict page.

Answer 2

I've never really seen a point in using it. Provides very little advantage, and might even make things harder to use.

Unless you happen to have hundreds or thousands of links, all to the same sub-directory. Then it might save you a few bytes of bandwidth.

As an afterthought, I seem to recall there being some problem with the tag in IE6. You could place them anywhere in the body, redirecting different portions of the site to different locations. This was fixed in IE7, which broke a lot of sites.

Answer 3

It makes pages easier for offline viewing; you can put the fully qualified URL in the base tag and then your remote resources will load properly.

Answer 4

Hmmm, seems like it might cause some issues with "fragments"/hashes:

http://www.w3.org/People/mimasa/test/base/

http://www.w3.org/People/mimasa/test/base/results

Edit: Breakdown of the problems with the base tag:

The base tag has a few -major- pitfalls, and I recommend being aware of every one before you start using it. Since I've discovered them after starting to use it, to my dismay, I feel compelled to create this summary of the pitfalls. I'll use a base tag of: <base href="http://www.example.com/"&gt; as my example in all the cases below.

Problems, in order of severity:

• Major: Changes the behavior of hashes and blank href links: The base tag makes links that link to their own page link to the base tag's url instead, e.g:
  <a href='' title='Some title'>A link to this page</a> becomes <a href='http://example.com' title='Some title'>A link to the base tag's page</a> <a href='#index' title='Some title'>A link to this page's index anchor</a> becomes <a href='http://example.com#index' title='Some title'>A link to an #index anchor on the completely different base page</a> With some work, you can fix these problems on links that you have control over, by explicitly specifying that these links link to the page that they are on, but this is essentially an unfixable change to behavior to links that are created by third-party libraries that you won't edit, so it can easily cause a big mess.

• Minor: IE6 requires fix: Requires conditional comments for ie6 to avoid screwing up the dom hierarchy, i.e. <base href="http://www.example.com/"&gt;&lt;!--[if lte IE 6]></base><![endif]--> as BalusC mentions in his answer above.

So overall, it's tricky unless you have full editing control over every link, and as I originally feared, that makes it more trouble than it's worth. Now I have to go off and rewrite.

Answer 5

I use <base> all the time. It greatly eases creating relative links in templating languages as you don't need to worry about the current context in every link.

You can do for example

<base href="${host}/${context}/${language}/">
...
<a href="home">home</a>
<a href="faq">faq</a>
<a href="contact">contact</a>

instead of

<a href="/${context}/${language}/home">home</a>
<a href="/${context}/${language}/faq">faq</a>
<a href="/${context}/${language}/contact">contact</a>

This has only one major pitfall: the <base> tag is in HTML documented as not having an end tag </base>. This causes a very specific bug in IE6: in its HTML DOM tree the entire content after the <base> tag is placed as child of the <base> tag. This can cause at first sight unexplainable problems in Javascript/jQuery/CSS, i.e. the elements being completely unreachable in specific selections (e.g. html>body) until you discover that one of its parents is the <base> tag.

A normal IE6 fix is using conditional comments to include the end tag:

<base href="http://example.com/en/"&gt;&lt;!--[if lte IE 6]></base><![endif]-->

This also instantly fixes the insanity of IE6 on WinXP SP3 to request relative <script> resources in loop.

---

Update: as to the "unexpected behaviour" with anchors, with the <base> tag you're basically declaring all relative links relative to it, including anchors. None of the relative links are relative to the current request URI anymore (as would happen without the <base> tag). This may indeed be unexpected for some developers, but it's -IMHO- not more than obvious. To construct anchors the right way, you basically need

<a href="${scriptname}#anchor">jump</a>

where ${scriptname} basically translates to $_SERVER['SCRIPT_NAME'] in PHP and ${pageContext.request.servletPath} in JSP, or if it is dyamically included/generated, the current request URI, e.g. $_SERVER['REQUEST_URI'] or ${pageContext.request.requestURI} respectively.

If it is not a "real" webapplication but more a HTML page displayed/generated from local disk/local application, then you should really not use the <base> tag. Or if it includes 3rd party code/library with uncontrollable context in the generated links, then you should indeed also not use the <base> tag.

Answer 6

Well, wait a minute. I don't think the base tag deserves this bad reputation.

The nice thing about the base tag is that it enables you to do complex URL rewrites with less hassle.

Here's an example. You decide to move http://mysite.com/product/category/thisproduct to http://mysite.com/product/thisproduct. You change your .htaccess file to rewrite the first URL to the second URL.

With the base tag in place, you do your .htaccess rewrite and that's it. No problem. But without the base tag, all of your relative links will break.

URL rewrites are often necessary, because tweaking them can help your site's architecture and search engine visibility. True, you'll need workarounds for the "#" and '' problems that folks mentioned. But the base tag deserves a place in the toolkit.