Absolute vs Relative URLs

Question

I would like to know what is better to use in my site: Using relative URLs (for pictures / css files / js files) or using absolute URLs?

In addition I would like to know the differences between these two types.

Thanks.

Answer 1

In general, it is considered best-practice to use relative URLs, so that your website will not be bound to the base URL of where it is currently deployed. For example, it will be able to work on localhost, as well as on your public domain, without modifications.

Answer 2

In most instances relative URLs are the way to go, they are portable by nature, which means if you wanted to lift your site and put it someone where else it would work instantly, reducing possibly hours of debugging.

There is a pretty decent article on absolute vs relative URLs, check it out.

Answer 3

Let's say you have a site www.yourserver.com. In the root directory for web documents you have an images sub-directoy and in that you have myimage.jpg.

An absolute URL defines the exact location of the document, for example:

http://www.yourserver.com/images/myimage.jpg

A relative URL defines the location relative to the current directory, for example, given you are in the root web directory your image is in:

images/myimage.jpg

(relative to that root directory)

You should always use relative URLS where possible. If you move the site to www.anotherserver.com you would have to update all the absolute URLs that were pointing at www.yourserver.com, relative ones will just keep working as is.

Answer 4

If it is for use within your website, it's better practice to use relative URL, like this if you need to move the website to another domain name or just debug locally, you can.

Take a look at what's stackoverflow is doing (ctrl+U in firefox):

<a href="/users/recent/90691"> // Link to an internal element

In some cases they use absolute urls :

<link rel="stylesheet" href="http://sstatic.net/so/all.css?v=5934"&gt;

... but this is only it's a best practice to improve speed. In your case, it doesn't look like you're doing anything like that so I wouldn't worry about it.

Answer 5

See this: http://en.wikipedia.org/wiki/URI_scheme#Generic_syntax

foo://username:[email protected]:8042/over/there/index.dtb;type=animal?name=ferret#nose
\ /   \________________/\_________/ \__/            \___/ \_/ \_________/ \_________/ \__/
 |           |               |       |                |    |       |           |       |
 |       userinfo         hostname  port              |    |       parameter query  fragment
 |    \_______________________________/ \_____________|____|____________/
scheme                  |                               | |  |
 |                authority                           |path|
 |                                                    |    |
 |            path                       interpretable as filename
 |   ___________|____________                              |
/ \ /                        \                             |
urn:example:animal:ferret:nose               interpretable as extension

An absolute url includes the parts before the "path" part - in other words, it includes the scheme (the http in http://foo/bar/baz) and the hostname (the foo in http://foo/bar/baz) (and optionally port, userinfo and port).

Relative urls start with a path.

Absolute urls are, well, absolute: the location of the resource can be resolved looking only at the url itself. A relative url is in a sense incomplete: to resolve it, you need the scheme and hostname, and these are typically taken from the current context. For example, in a web page at http://myhost/mypath/myresource1.html, you could put a link like so <a href="pages/page1">click me</a>. In the href attribute of the link, a relative url s used, and if it is clicked, it has to be resolved in order to follow it. In this case, the current context is http://myhost/mypath/myresource1.html, so the schema, hostname, and leading path of these are taken and prepended t pages/page1, yielding http://myhost/mypath/pages/page1. If the link would have been: <a href="/pages/page1">click me</a> (note the / appearing at the start of the url) then it would have been resolved as http://myhost/pages/page1, because the leading / indicates the root of the host.

In a webapplication, I would advise to use relative urls for all resources that belong to your app. That way, if you change the location of the pages, everything will continue to work. Any external resources (could be pages completely outside your application, but also static content that you deliver through a content delivery network) should always be pointed to using absolute urls: if you don't there simply is no way to locate them, because they reside on a different server.

Answer 6

A URL that starts with the URL scheme and scheme specific part (http://, https://, ftp://, etc.) is an absolute URL.

Any other URL is a relative URL and needs a base URL the relative URL is resolved from (and thus depend on) that is the URL of the resource the reference is used in if not declared otherwise.

Take a look at RFC 2396 – Appendix C for examples of resolving relative URLs.

Answer 7

I would heartily recommend relative URLs for pointing bits of the same site to other bits of the same site.

Don't forget that a change to HTTPS - even if in the same site - is going to need an absolute URL.