Relative URLs and Absolute URLs

by kirupa   |   2 September 2013

A lightly contentious issue for many web developers revolves around what kind of URL scheme one should use when referencing resources and links within the same site. For example, you can use a fully-qualified absolute URL:

<img src="http://www.kirupa.com/images/foo.png" width=100 height=100>

You can also use the more compact relative URL:

<img src="../images/foo.png" width=100 height=100>

Now, this article isn't about picking sides and telling you why one is superior to the other. The reason is that you need to use both absolute and relative URLs as part of creating your sites and apps. Instead, this article will show you when to use which.

Onwards!

When to Use Absolute URLs

Absolute URLs point to something without any regard for context. A URL like http://www.kirupa.com/images/foo.png is something that works in your browser, on a friend's blog, in outer space, or wherever. There aren't too many times when you would need to use absolute URLs. In fact, I can think of two general cases when you need to...

You are Pointing to Content Outside of Your Site

If the content you are referencing lives outside of your domain, you have to use an absolute URL:

absolute references

 There is simply no way to use relative URLs for things that go outside of the domain your HTML page is currently in. This applies to things in subdomains as well. You can't reference something in a subdomain using a relative URL syntax.

Your References Will Change Depending on Context

Some of your HTML will find itself merged with other pieces of HTML and served on a variety of different pages in your site. While this may sound like a bizarre scenario, this is exactly what happens when you employ server side includes or site-wide templates to make your content more modular and reusable.

 URLs inside these "template" pages cannot assume that relative paths will still work when they find themselves in different locations. For example, this is what the markup for something on this site that gets server side included looks like:

<div id="bookBannerContent">
	<p class="centerImageNoBorder">
		<a href="http://www.kirupa.com/book/animation_in_html_css_and_javascript.htm">
		<img id="bookAd" src="http://www.kirupa.com/supporter/animation_book_right_banner.png" width="231" height="251"></a>
	</p>
	<ul>
		<li>
		<a href="http://www.amazon.com/dp/1482758954" style="background-image: url('http://www.kirupa.com/mini_icons/entypo/shopping_20x20.png');">
		Buy on Amazon.com</a>
		</li>
	</ul>
</div>

Notice that all references are made up of absolute URLs - even for content that lives within kirupa.com. The reason is that this HTML is served up on the sidebar which is then included on pages living in various different directories across the site.

Use Relative URLs Whenever Possible

Outside of the two cases you saw earlier, for any other kinds of references, use relative URLs. There is no point in cluttering your markup with unnecessary characters when your browser, search engines, and everything else on the planet knows how to work with relative URLs and resolve things properly.

If you do some research on the net, you'll see some other reasons people provide for going with relative URLs. Some of them include:

There are a few other reasons, but I wouldn't mention them in public. I feel a bit ashamed about listing the three you see here, for I'm not sure how relevant they even are these days. 

Conclusion

Neither absolute URLs nor relative URLs are good enough to use exclusively on their own. Use the right one for the right situation. To point to external content or to reference things from inside a site-wide template or server-side included page, I use absolute URLs. For everything else, I use relative URLs.

Need Help?

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out. Plus, we have a large collection of smileys you can use

Share

Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly at kirupa[at]kirupa.com.

Cheers!

Kirupa Chinnathambi

 

Add Your Comment (or post on the Forums)

blog comments powered by Disqus