The <base> tag in HTML is a useful tag that isn't used very often, because it can seem somewhat confusing. It has two primary uses: for frames and for HTML.
The <base> Tag with HTML
The base tag is very useful for Web designers who build websites in one location but will ultimately be placed in another location.
For example: I worked on a freelance job on a widget for a large corporate website. I wanted to host my testing pages on my own server before I loaded it to the client's website. But I didn't want to have to download their entire CSS library and other external scripts to my testing server. So I used the <base> tag to help:
- I created an HTML page using the corporate site's CSS and JavaScript by pointing to those elements with a FQDN or full-path URL. Such as
http://www.about.com/0g/dc/s07.css - Then I built my widget using the paths that would be on the corporate site. So if the widget images were going to be in
/imagesI created a directory called "images" in my testing area. - Then I linked to those elements using the full path that they would have on the corporate site - not the full path they had on my testing server.
src="/images/image.gif"(rather than something likesrc="/corporation/widget1/images/image.gif" - But if I leave the page like that, the images would have all been broken, so I added a <base> tag to tell the page where it should serve the images from:
<base href="http://mydomain.com/corporation/widget1/" /> - Then, when I delivered the code to the corporation, all I had to do was remove the <base> line from my HTML and it would be ready to go on their server.
The base tag tells the browser what the base URL for elements should be. If you are using full-path URLs with no <base> tag, then the browser assumes that the base URL is the current domain name. In other words, for this article, the default base URL would be http://webdesign.about.com.
When you include a base href tag in your document, you are telling the browser that any URI it encounters that is not written as FQDN (or including the damain name and http://) should have a different base URL than the default.
Change the base URL like this. In the <head> of your HTML, add:
<base href="URI" />
Change "URI" to the FQDN URI where you want your URLs to default to.
The <base> Tag with Frames
When you write frames, you can set a target where you want that link to open. The default is _self or the current frame and browser window that the link is in.
But if you've ever used frames for navigation, you know that you don't always want links to open in the current frame. So you can either use the target attribute on every link, or an easier method is to use the <base target> tag. When you set the base target, you are telling the browser that every link in that frame window should open in the specified frame, rather than the default. Then if you want to change that on a per-link basis, you can override your <base target> with the target attribute.
Change the base target like this. In the <head> of the frame page where you want to change where the links go, add:
<base target="frame name" />
Change "frame name" to the name of the frame you want to open links in. If that name doesn't exist it will open in a new window. You can also use the default frame targets.
