What are the recommendations for html <base> tag?

Question

I\'ve never seen HTML tag actually used anywhere before. Are there pitfalls to its use that means I should avoid it?

The fact that I have never noticed

Answer 1

One thing to keep in mind:

If you develop a webpage to be displayed within UIWebView on iOS, then you have to use BASE tag. It simply won't work otherwise. Be that JavaScript, CSS, images - none of them will work with relative links under UIWebView, unless tag BASE is specified.

I've been caught by this before, till I found out.

Answer 2

My recommendation is NOT to use the <base> element in managing url paths. Why?

It just trades one problem for another. Without the base element you can use any path system you like for your relative paths and links without fear they will break. The minute you set the base element to a path you are "locked in" to designing all your url's to work off that path and will now have to change ALL paths to work from the base path. Bad idea!

That means you have to now write LONGER paths AND keep track of where each path is relative to this base. Worse.....when using the <base> element they recommend you use a fully qualified base path to support older browsers ("https://www.example.com/"), so now you've hard-coded your domain into your page or made all your links dependent on a valid domain path.

On the other hand, the minute you remove the base path again from your website, you are now free again to use shorter relative paths, which can be fully qualified, use absolute paths from the root, or use paths that are truly relative to the file and folder you are in. Its much more flexible. And best of all fragments like "#hello" work correctly without any additional fixes. Again, people are creating problems that don't exist.

Also, the argument above that your use base url's to help you migrate folders of web pages to new subfolder locations doesn't really matter today since most modern servers allow you to quickly set up any subfolder as a new application root folder under any domain. The definition or the "root" of a web application is not constrained by either folders or domains now.

It seems kind of silly this whole debate. So I say leave out base url and support the older native server-client default path system that does not use it.

Note: If the problem you have is controlling paths due to some new API system, the solution is simple...be consistent in how you path all your url's and links in your API. Don't rely on browser support of base or HTML5 or newer circus tricks like the javascript API kiddies do. Simply path all your anchor tags consistently and you will never have issues. Whats more, your web application is instantly portable to new servers regardless of path systems used.

Whats old is new again! The base element is clearly about trying to create a solution to a problem that never existed in the Web World 20 years ago, much less today.

Answer 3

It's probably not very popular because it's not well known. 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 4

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://example.com/product/category/thisproduct to http://example.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.

Answer 5

In the case of SVG images inlined in the page there is another important issue that arises when the base tag is used:

Since with the base tag (as noted above already) you effectively loose the ability to use relative hash URLs like in

<a href="#foo">

because they will be resolved against the base URL rather than the current document's location and thus are not relative anymore. So you will have to add the path of the current document to these kinds of links like in

<a href="/path/to/this/page/name.html#foo">

So one of the seemingly positive aspects of the base tag (which is to move the long URL prefixes away from the anchor tag and get nicer, shorter anchors) completely backfires for local hash URLs.

This is especially annoying when inlining SVG in your page, be it static SVG or dynamically generated SVG because in SVG there can be a lot of such references and they will all break as soon as a base tag is used, on most, but not all user agent implementations (Chrome at least still works in these scenarios at the time of writing).

If you are using a templating system or another tool-chain that processes/generates your pages, I would always try to get rid of the base tag, because as I see it, it brings more problems to the table than it solves.

Answer 6

have also a site where base - tag is used, and the problem described occured. ( after upgrading jquery ), was able to fix it by having tab urls like this:

<li><a href="{$smarty.server.REQUEST_URI}#tab_1"></li>

this makes them "local"

references i used:

http://bugs.jqueryui.com/ticket/7822 http://htmlhelp.com/reference/html40/head/base.html http://tjvantoll.com/2013/02/17/using-jquery-ui-tabs-with-the-base-tag/