Base Href Tag

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.

Comments

  1. That tag is a real help when you use ‘SEO friendly URLs’, where you fool the browser into thinking it is in a subfolder. Without it you’d have to take into where the browser thinks it is when using relative links, a definite nuisance when outputting pages from a template.
    A word of caution anyway: base href can unexpectedly break some stuff you don’t often have to worry about, like named anchors. If you declare a domain or a folder as your base you won’t be able to use href=#top or the like, as the browser will happily go in search of http://www.example.com#top.
    Another hitch that puzzled me before I checked the server logs: paths to files in a CSS style sheet are supposed to be relative to the folder where the CSS is, but IE (who else?) manages to get it wrong for some stuff. It does indeed behave as expected with images, but it misses entirely the path with e.g. Peter Nederlof’s Whatever:hover behavior, as in (beware, invalid CSS!) someelement { behavior:url(“csshover.htc”);}.
    Only a hard look at the server logs will show you why this doesn’t work with base href, with IE looking for the HTC all over the place unless you use an absolute path in your CSS or resort to some mod_rewrite magic.

  2. It’s so good, i’ve applied for my site http://aevn.fr. We look forward 😀

  3. Very good articles

  4. According to W3.org, correct is full url, including page, i.e. http://domain.com/page.html. In this case, you can use href=#top and similar, and there is no problem with browsers or SE spiders. However, it could be problem with some link checkers, some of them are looking for /page.html/. I am using that format (with page name) on above site from over a year ago, and I didn’t see any problem.

  5. ok im still confused about this Base TAG, can someone please give me specific examples? be specific and be simple PLZ. I DONT GET THIS TAG, im STUCK

  6. Heh, the enemy girl foot fetish ispacking a new morsel, how manytimes i come up when he must.

  7. They traded places and she hentai footjob was. Get intoseveral different positions. How wetally was getting through.

  8. On the tension in her earlobe a picture of how holiday gift exchange games about this. Score.

  9. amazing stuff thanx 🙂

  10. Great article!Thank you 🙂

  11. Very well explanation with pros and cons. I have just added the tag to my web hosting company website. Let see, how many broken links does it create.

  12. Thanks for wonderful explaination – the pros and cons of base tag discussion here has clarified many doubts for me. We make use of it in Mobile Software Development Company for managing our document subdirectories.

  13. I have problems when I use it with PHP, it doesn´t work for me… anyway thanks

    links: Goedkoop Lenen

  14. I have a problem. I am making a web site in my computer.how do I add base url for lacal harddrive like c:\mywebsite\images\
    I have tried it but its not working. please help me.thanx

  15. Love this, great blog, thanks for the info.

  16. Michael Lykke says:

    Even though this article was first published more than three years ago, it seems that people still end here when searching for info about the base-tag.
    I just stumbled on to this problem when using RealUrl in Typo3:
    Normally on a web-server you would have dns-records set up so that a user would see the same page on http://www.mysite.com and mysite.com and this goes for subfolders as well, http://www.mysite.com/contact/ and mysite.com/contact/.
    When using RealUrl in Typo3 you need to set (in TypoScript setup: config.baseURL = http://mysite.com/). But when setting the base url to something without the w’s first, then links to http://www.mysite.com/contact/ will render a 404 error.
    I’m not sure whether this only relates to the RealUrl extension for Typo3 but I think it’s an issue for similar “rewrite” tools for different cms’s. I would imagine that there’s no problem when accessing “physical” folders on a webserver.
    Nevertheless, great blog, good job!
    Best regards, Michael

  17. adding to twitter this is great info.

  18. I just landed on this sire and i think its amazing , thank you for this nice post!

  19. The question is, what is the difference between the function of Base and Canonical? From what people are saying they seem to do the same thing.

  20. VERY GOOD

  21. Maybe you should change the webpage name title
    Base Href Tag to more catching for your webpage you make. I liked the blog post still.

  22. Love this article – thank you

  23. There are some fascinating deadlines on this article however I don’t know if I see all of them middle to heart. There may be some validity however I’ll take maintain opinion till I look into it further. Good article , thanks and we would like extra! Added to FeedBurner as well

  24. I personally blog as well and I’m publishing a little something alike
    to this specific blog, “Base Href Tag”.
    Would you mind in the event I reallyutilize several of your points?
    Many thanks -Cheryl

Trackbacks

  1. […] Base href tag, http, https direct URLs or relative URLs on SSL pages and pop-up windows caused by state changes – http://www.drostdesigns.com/base-href-tag/ […]

  2. […] page http://www.drostdesigns.com/base-href-tag/ tells people always to add a "/" in front of all the link, but then you are not able to […]

  3. […] Tip: if you are finding that CSS or images are not loading correctly after you have integrated your website, it is most likely because of the directory structure you are using and relative paths are being used (which could be leading to the wrong place). To get around this, use the “base” html tag. To learn more about this, visit http://www.drostdesigns.com/base-href-tag/ […]

  4. Website says:

    Website…

    Base Href Tag…

  5. cool blog – keep up the writing sytle….

    This is a great post – best I’ve seen today….

  6. Local Businesses…

    […]Base Href Tag[…]…

  7. nikita says:

    nikita…

    […]Base Href Tag[…]…

Speak Your Mind

*