Web Design Discussion

The base href tag tells the browser that all relative links within the document start from that specified base location. This allows you to view how your document will look and behave when placed on the server without actually having to do so.

Where to place the base href tag

The < base > tag goes in the < head > of the page. The < base > tag specifies the “default domain” that all domain-less links on the page are pointing to. ie

< html >
< head >
< title >Web Site Discussion< /title >
< base href="http://www.drostdesigns.com" >

How the base href tag works

If you are on http://www.domain.com/page1.html then a link to /page1.html is pointing to http://www.domain.com/page1.html

If you are on http://domain.com/page2.html then a link to /page2.html is pointing to http://domain.com/page2.html

< img src=logo.gif >

In this example the full url…http://www.drostdesigns.com/logo.gif will be created due to the base href.

Without the base href this image tag would be directed to the relative location of the page.

Tips

1. Make sure that the < base > tag is placed before any links to any CSS or JS files in the < head > section
2. Make sure that your internal links to pages, files, images, stylesheets, etc all start with a / and that the URLs specify the full path to the file.
3. Make sure that you check your site using Xenu LinkSleuth for any problems.
4. The absolute correct code for a base href is < base href="http://www.domain.com/" >
5. Link to your pages like this:

/page.html
/folder/page.html
/images/widgets/blue.widget.jpg

Don’t link like this:

page.html
../../image.jpg
without a starting “/”.

If you link to an index page, then you would just use “/” or “/folder/” to link to it.

6. If you don’t want to mess with inserting the base href tag, you can add the 301 redirect to the .htaccess file in the root folder for each individual site. Here’s how:


Options +FollowSymLinks
RewriteEngine on
RewriteCond %{HTTP_HOST} ^domain\.com [NC]
RewriteRule ^(.*)$ http://www.domain.com/$1 [L,R=301]


If you wish to read more about implementing this method read:

How to Redirect a Web Page Using a 301 Redirect

Conclusion

Insert the base href tag into the header tag for every web site you build. This will help avoid getting broken links form relative URLS.

If you want to make sure all visitors are directed to http://www.domain.com/ instead of http://www.domain.com/index.html or http://domain.com, use the 301 redirect code mentioned above.

This entry was posted on Monday, August 21st, 2006 at 8:35 am and is filed under Web Design . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.