Absolute and Relative Paths

Understanding the difference between an Absolute and Relative URL path

Secure Internet connection
JuSun/E+/Getty Images

When you're coding a webpage, one of the key elements you will be adding to that page is hyperlinks (commonly just referred to as "links"). These links can be to other webpages, either on your site or elsewhere on the Web. You can also have links to other resources, like images, videos, or documents.

In each of these instances, you need to consider how you're going to link to these various pages or resources from your site. Specifically, you need to decide what kind of URL path you will write. There are two standard ways to create links:

  • absolute paths
  • relative paths

Absolute Path URLs

Absolute paths use URLs that refer to a very specific location on the Internet. These paths will include a domain name as part of the link path itself. An example of the absolute path to this web page is:

http://webdesign.about.com/od/beginningtutorials/a/aa040502a.htm

You would typically an absolute path when you want to point to Web elements that are on a domain other than your own. For example, if I wanted to link to a page on a different website here, I would need to include the full URL for that link since I am leaving one domain (webdesign.about.com) to go to another . That link would look like this

<a href="http://www.pumpkin-king.com/about> Jeremy Girard's website</a> 

If you are linking to anything that is "off site" from your own, you will need to use an absolute path. You could actually use absolute paths even if you are linking to pages on your own site, but it is not required and, depending on your development environment, absolute paths could cause problems.

For example, if you have a development environment that you use during the creation of a website, and you code all the URLs absolutely to that URL, then they will all need to be changed once the site "gives live". To avoid this problem, the file paths for any local resources should use Relative Paths.

Relative Path URLs

Relative paths change depending upon the page the links are on - they are relative to the page that they are one (hence the name). If you are linking to a page on your own site, or an image inside of an "images" directory on that site, a relative path is what you will likely use.

There are several rules to creating a link using the relative path:

  • links in the same directory as the current page have no path information listed
    filename
  • sub-directories are listed without any preceding slashes
    weekly/filename
  • links up one directory are listed as
    ../filename

How to determine the relative path:

  1. First define the URL of the page you are editing. In the case of this article, that would be http://webdesign.about.com/od/beginningtutorials/a/aa040502a.htm
  2. Then look at the directory path for the page. For this article, that is /od/beginningtutorials/a/
  3. Get the URL of the page you want to link to. For this example that would be the “How to Create a Web Page with HTML” article: http://webdesign.about.com/od/beginningtutorials/ss/aasspagehtml1.htm
  4. And look at the directory path for that page: /od/beginningtutorials/ss/
  5. Compare the two paths, to determine how to link to it. From this article I would need to step up one directory from the /a/ directory and then go back down to the /ss/ directory using the code ../ss/aasspagehtml1.htm.
  1. Write the link: <a href="../ss/aasspagehtml1.htm">How to Create a Web Page with HTML</a>

 

As you can see, this URL path will "go up one directory" because it begins with the ../ characters. It will then look into the "ss" directory and finally fine the specified .htm page.  

Another way to write relative paths is to begin the path with a forward slash (/).  That character tells the browser  to go to the root of the current directory. From there, you can add whatever folders or file names you need for your specific resource.

Original article by Jennifer Krynin. Edited by Jeremy Girard on 10/3/16