Absolute and Relative Paths

Understanding the difference between an Absolute and Relative URL path

Purple Https: with an animated hand clicking

JuSun / E+ / Getty Images

No aspect of web design is more web-centric than hyperlinks (commonly referred to simply as links). The ability to create a link on a page and allow readers to easily access other content is one of the defining traits that set websites apart from other communication mediums like print or broadcast media.

These links are easy to add to a page, and they can be to other web pages, either on your site or elsewhere on the Web. You can also have links to other resources, like images, videos, or documents. Still, as easy as links are to add, they are also one of the items that many new web designers struggle to understand at first, especially in terms of the concept of file paths and what an absolute versus a relative path means, as well as when one is used instead of the other.

In each of the links instances described above, you need to consider how you're going to connect to those various pages or resources from your site. Specifically, you need to decide what kind of URL path you will write. In web design, there are two standard ways to create links and two kinds of paths that you can use:

  • 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:

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 you wanted to link to a page on a different website here, you would need to include the full URL for that link since you are leaving one domain (webdesign.lifewire.com) to go to another. That link would simply add the element inside the page with the URL used as the value of the "href" attribute for that link.

So if you are linking to anything that is "off site" from your own, you will need to use an absolute path, but what about pages or resources on your own domain? 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 when the site goes 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. Relative paths do not use the full URL of a page, unlike the absolute paths we just looked at.

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:
  • Sub-directories are listed without any preceding slashes:
  • Links up one directory are listed as:

How to Determine the Relative Path

  1. First, define the URL of the page you are editing. In the case of the example article listed above, that would be /filename.

You will see here that we write the relative path by beginning that 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, drilling down to folders and documents to finally land upon the exact resource which you would like to be linked.

So in summary — if you are linked off-site, you will use an absolute path that includes the full path to whatever you wish to connect to. If you are linked to a file on the domain which the page you are coding resides, you can use a relative path that essentially navigates from the page you are on, through the file structure of the site, and finally to the resource which you need.