The Proper use of Base HREF’s
I am helping, off an on, a friend with a project that is powered by WordPress. One of his latest hijinks, involved named anchors.
Basically he was having trouble using them across varying sections and templates. He was creating absolute URI’s and tacking on the anchor pointer, lets say #top on that generated URI. The problem of course is that WP dynamically generates its content, which gives you all kinds of URI’s.
So I sent him a recommendation, to just use relative anchoring, meaning just specifying #top instead of:
http://my.greatsite.com/index.php?p=3#top.Doing this would allow him to overcome problems like when you have multiple paged posts, if you use <? get_permalink(); ?>#top to produce the URI, then when you are on page two, and click the #top link it would take you from
/index.php?p=3&page=2#topto/index.php?p=3#top
since you created your named anchor link with get_permalink, which doesn’t care about page=2.
The real problem was Base HREF’s
When I received his response I was enlightened to what the real problem was. He was using Base HREF’s and more importantly, they were being used incorrectly.
Now this is not a dig at my friend, he is a bright and talented designer. 98% of people who use Base HREF’s use them incorrectly. Most of the time when you see them used, they are pointing to the site root, or the top level of a given site. So on every page of my site I would have this in the <head> portion of my HTML:
<base href="http://chrisjdavis.org">The problem of course is that this is incorrect. From the W3C definition:
The BASE element allows authors to specify a document’s base URI explicitly. When present, the BASE element must appear in the HEAD section of an HTML document, before any element that refers to an external source. The path information specified by the BASE element only affects URIs in the document where the element appears.
Basically this is saying that the Base HREF is the URI of the document you are currently on, not the entire site. The Base HREF is how you resolve relative URI’s to the current page (document) you are on.
Now I am of the mind that you shouldn’t use this on a site whose content is generated dynamically, but that is just me. Oh and if you leave out the Base HREF modern browsers will take the page you are on and make it the base, by default.
What if I want to use them with WP despite your sage advice?
I am offended… really. Well thanks to the Theme System built into WP, this can be accomplished by using some of the built in functions like get_permalink(), bloginfo('siteurl') , the_category(' '), some elbow grease, and inventive use of header.php.
I will leave it to you to figure out how to make this all work, since you know… I am against it and all. Don’t want to help the enemy too much.
Stroll on over and visit Colin D. Devroe
March 1, 2007
All your base-ref belong to us. Excellent write up Christopher.
Stroll on over and visit Chris J. Davis
March 1, 2007
Yeah I know what you mean. The simplest solutions are ones we confronted before, fixed and promptly forgot about!
Thanks again for your time and comments.
Stroll on over and visit Ryan
March 1, 2007
Ok, I see your point. I was actually incorrectly thinking that the base href was the uri of the folder your document is located in. I see from the example though that the base href is, as you say, the uri of the document. I also thought that I had an issue on my own site requiring the use of the base tag, but now that I looked at the source I see no base tag in sight and I now I remember that I just stopped using relative links for the references that made me want to use it in the first place.
Actually the only reason I was interested in this post is because I was doing some work where the base tag was causing problems. Now that I remember having similar problems on my own site, I can go look and see how I solved it without the tag. It’s funny how sometimes the answer can be so close yet so far away.
Stroll on over and visit Egil
March 1, 2007
Great tip on the #top link. Never taught about doing it that way. The BASE tag isn’t really needed with Wordpress in my humble opinion, since it usually creates full URI’s.
What might be good idea for WP is a way to make full URI’s to your own pages and posts. Easier for creating posts linking to your own stuff. Anyway that’s a bit off topic.
Also, hey I’m new here :)
Stroll on over and visit Chris J. Davis
March 1, 2007
I am not sure what the passage you quoted is supposed to prove, other than I was right… since I stated the majority of it in the article, excluding the protocol interaction bit.
And I never stated that is should be what is in your address bar, but the current document is not always index.php is it? Sometimes it is index.php?p=5 which is not the same thing. This is the problem with dynamicaly generated pages.
The physical content of index.php and index.php?p=5, at the moment of display, is completely different.
What I am saying is the fact that with dynamicaly generated content the rules of what is a “document” and what is not are very different and as such must be handled differently. /2005/05/23/ or index.php?p=724 are fundementally different documents than index.php.
The Base HREF specification was drafted before the explosion of dynamic websites that we have today, and therefore must be interpreted for them. HTML 4.0 which this is quoted from was finalized in 1997!
And seriously the w3c doesn’t even use Base HREF’s anymore…
Anywhoo thanks for the comment, glad to have you on the Silly Train.
Stroll on over and visit Kates
March 1, 2007
I’ve learn HTML a long time ago but until now I didn’t how to use that BASE HREF. Thanks for the article. I don’t have to worry that I’m missing something if I’m not putting it in my <HEAD> tags.
Stroll on over and visit Roger
March 1, 2007
Ditto.
BASE HREF? Who cares? By the way, how do I get my own cool little image to appear next to my name?Stroll on over and visit Shahul
March 1, 2007
I do have one doubt…
I having three phase in my project named Guest User, Registered User, Admin User. For Registered User and Admin User I have created a folders (eg. admin and regis).
Me now accessing a common folder named “scripts” where my javascript files will be present. To access the js I follow
Guest User - filename.js
Registered User - script/filename.js
Admin User - script/filename.js
In one of my function in js I have called a image, which work fine for Registered user and Admin User, where I do need to duplicate the function for Guest user to make the image root as ”../”
To avoid duplicating the function, will base-href helps me?
Stroll on over and visit Brook Lovatt
March 1, 2007
Hello all,
Since some of you seem to be BASE HREF experts, I have a question for you:
I’m trying to integrate a reverse proxy with an application called HATS that is basically just a J2EE font-end that presents old green-screen terminal apps over the web. The application’s jsps are producing html that includes a BASE tag similar to this:
I always thought that the BASE tag specified a URL, but this app seems to rely on the fact that test2.jsp is loaded before the rest of the content on the page will work.
The problem is that the proxy strips off test2.jsp when it filters the tag, so it ends up looking like this:
So, what I need to know is:
1. Is it correct to specify a specific file in the BASE tag?
2. What should the browser do with this file?
3. Is there another way to pre-load the test2.jsp file outside of the BASE tag?
Any help would be greatly appreciated.
Thanks,
Brook
Leave a Reply