Quick Tip: Absolute & Relative Paths

There are two types of links in web design: absolute and relative links. It’s important to understand how both of these work if you want your links and images to work correctly.

This screenshot has nothing to do with absolute and relative paths, but it looks kind of empty without anything here

Absolute links are quite simple, they require the full page from the root to the file. So if you wanted to link to another page on your site, you path would look something like this: http://domain.com/directory/subdirectory/page.htm. This tells the browser that it’s starting at the root of your site, and directs it through every step in the URL to get to the final destination. It’s simple, but it’s also somewhat cumbersome.

Relative paths, on the other hand, do not require the full path. These links only include the path to the file relative your current location. Because of this, you can only use relative links within the same site. Whenever you’re linking to a resource on another website, you must use an absolute link.

Let’s assume we’re linking to the same page as above, but we’re linking it from a page in the “subdirectory” folder, which is in the same location as the page we’re linking to. Since both pages are in the same directory, out link would simply be: “page.htm”.

Let’s assume that the page we’re linking from is in “directory” rather than “subdirectory”. That means our two pages are in different folders, so we’ll need to adjust our relative link to point to the right place. Since we’re starting from a directory above the directory with out link in it, our new link would be: “subdirectory/page.htm”. The tells the browser it needs to start where we are presently, and then go up to “subdirectory” where it will find the correct file.

Easy enough, right?

Relative paths get a little trickier when you need to move backwards, or when you’re working with a dynamic site and you can’t be sure where the relative path will start from. In those cases, simply follow the below rules:

To move backwards, start with “../”. This is stack-able, so “../../” will move you back two directories. Let’s say that’s we’re at http://domain.com/directory/subdirectory_2/page_2.htm. In order to get to page.htm, our path would be “../subdirectory/page.htm”. The ../ moves us from subdirectory_2 to directory, where we simply browse to subdirectory/page.htm as in past examples.

To start from the root of the site, proceed the link with a “/”. Using our same example, our link would be “/directory/subdirectory/page.htm”. This is especially important when you’re developing a site locally, and the end result will have a different root.

That’s all there is to it. I hope this was helpful, and if you have any questions, please don’t hesitate to ask.

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>