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="//" 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.


When to Use Absolute URLs

Absolute URLs point to something without any regard for context. A URL like // 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="//">
		<img id="bookAd" src="//" width="231" height="251"></a>
		<a href="" style="background-image: url('//');">
		Buy on</a>

Notice that all references are made up of absolute URLs - even for content that lives within 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. 


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.

If you have a question about this or any other topic, the easiest thing is to drop by our forums where a bunch of the friendliest people you'll ever run into will be happy to help you out!


Get cool tips, tricks, selfies, and more...personally hand-delivered to your inbox!

( View past issues for an idea of what you've been missing out on all this time! )


blog comments powered by Disqus


No spam. No fluff. Just awesome content sent straight to your inbox!

Awesome and high-performance web hosting!
new books - yay!!!