First time visitor? The tutorials start here.

Absolute, Relative, and Root-relative URLs

To demonstrate the difference between absolute, relative, and root-relative URLs, I’ll use the Crimson Editor image below.

Crimson Editor

Absolute URLs

Right-click on the Crimson Editor image above, and then click on “Properties” from the resulting popup menu. See where it says “Location:”? The absolute URL to that image is:

http://ifyoucodeittheywill.com/img/crimson-editor.png

No matter where you are when you refer to this URL, it will always go to the “ifyoucodeittheywill.com” domain, look there for a directory named “img,” then look in that “img” directory for a file named “crimson-editor.png.”

Think of it as a geographical place on the world wide web. “ifyoucodeittheywill.com” would be the country, the “img” directory might be the state or city, and “crimson-editor.png” would be the street address, pinpointing the exact location within that geographical region.

If you are referring to this image from any website other than this one, you will need to use the absolute URL.

Relative URLs

Sticking with my geography example, imagine someone walking up to you on the street and asking for directions to some place in that town or a neighboring one. You wouldn’t tell them which country (domain) to go to, since you are both already there. Instead, you would tell them, starting from where you are both standing, to go down some street, turn left here, etc. You are giving them directions relative to the place where you are both currently standing.

If this page was located in the “img” directory, I could refer to the image as “crimson-editor.png” and leave it at that.

If the page you are reading was located in the “root” directory… Hmm, maybe I should draw a diagram…

Directory hierarchy

The root directory is where everything else on the domain branches out from. Inside the root directory, this diagram shows an “img” directory, as well as “a” and “b” directories. Inside the “a” directory are directories named “c” and “d,” and inside “b” you will find “e” and “f.” Normally your directories should have more meaningful names (like “img” to specify that images are being stored there), but the meaningless letters should work well enough for this demonstration.

Right, so let’s say you’re in the root directory and you want to point to the image in the “img” directory. The relative URL for that would be this:

img/crimson-editor.png

This means you’re going down to the “img” directory, then looking there for crimson-editor.png.

Now let’s say you’re in the “a” directory. You would first have to go up to the root directory, then down to the img directory. The way to do this would be:

../img/crimson-editor.png

The ../ means go up one directory. Notice that if you go up one directory, there will always be only one directory you can end up in, therefore there is no reason to specify the name of the directory when you go up. You’ll only need to do that when you go down, since there can often be more than one place to go when you’re going down.

Here’s that diagram again, in case it has slipped off the page:

Directory hierarchy

Now let’s say you’re in the “c” directory. You would have to go up to “a,” then up again to the root directory, then back down to the “img” directory.

../../img/crimson-editor.png

If you are in “d” and the image is in “c,” you wouldn’t have to go all the way up to the root directory. Instead, you would go from “d” to “a” to “c,” like so:

../c/crimson-editor.png

That should do it for relative URLs. Now for…

Root-relative URLs

Instead of being relative to where you are, root-relative is relative to where the root directory is.

Going back to giving someone directions, let’s say you live and work in Paris, France. Let’s also say you don’t know where someone is coming from, like when you’re planning a party and sending out maps to a bunch of different people. Whether you’re giving directions to your workplace, your home, the location of a wedding reception, or any place in the city, you would always start from the same highly-visible place, and the most likely place I can think of in Paris would be the Eiffel Tower.

In this example, Paris is the domain, the Eiffel Tower is the root directory, and the place you are giving directions to is a file within some sub-directory (a street or neighborhood) of Paris.

Here’s that diagram again, as I’m sure it has slipped off the page again by now:

Directory hierarchy

Root-relative URLs always start with a slash, to specify that the root is where we’re starting from. To use the same image as our other examples, this would be:

/img/crimson-editor.png

From the root (/), to the “img” directory, to the filename. If you’re pointing to a page named “mypage.htm” and it’s located in the “d” directory, the root-relative URL would look like this:

/a/d/mypage.htm

From the root, to the “a” directory, to the “d” directory, where mypage.htm resides.

Why use relative URLs when absolute URLs will work anywhere?

When you use an absolute URL, a request has to be sent out to find the domain that is being pointed to, even if that request is coming from the same domain. Basically, it’s like sending someone out of the country before they can come back in and follow directions to the place they’re looking for, and this can be a real waste of time. It won’t take as long as physically leaving a country and then returning, of course, but it does take time and will slow down the loading of images and pages.

Should I use relative or root-relative?

I often find that root-relative is best. I would explain why here, but we haven’t covered enough ground in these tutorials yet for the explanation to make much sense, so that explanation will have to come later.

Now let’s put some of this into practice.

If you found this article useful, please spread the word:
Stumble it! Digg! Tweet it!



Questions or comments?

Please log in to post a comment. Sorry, but it prevents this from happening. If you're not registered yet, you can register here.