Understanding Relative Paths vs Absolute Paths

Written by Tinjure WP Posted on

While linking a file or page in a site, it’s essential to know the correct location of file or document. Referencing to a file folder within a project structure or to a document from a website outside of the project is very common task to be performed in development.

However, difference between absolute path and relative path can be confusing in the beginning to grasp and when to use one vs other.

For illustration purposes, lets say, a logo.png is inside /image folder in a website. The absolute and relative path of the logo.png is represented as follows:

  • Absolute path: https://www.mywebsite.com/images/logo.png
  • Relative path: /images/logo.png

While referencing file paths, we often stumble upon files or image not displaying in a working document. To quote from Chris Coyier’s CSS Tricks note: if image is not display, it could be due to relative path to your image.

Using following illustration and explanation from the CSS Tricks post:

Figure: Screenshot showing relative path (source: CSS Tricks).
  • “/” : starts with current directory (same folder as current document). The slash instructs the browser to refer to the root of the current directory.
  • “../”: of one directory backward (or up) and starts there.
  • “../../”: out of two directories backwards (up) and start from there.
  • “../../../”: Out of 3 folders
  • “../../../../”: Out of 4 folders

The “up”, “above”, “backward” refers to parent directories whereas “down”, “below”, “forward” refers to sub-directories.

A more detailed explanation of relative vs absolute file path is explained in Using Paths & Folders posts in Learn the Web site. Adopting the syntax summary from the post:

  • start with nothing or ./ — single dot + slash. Start in the same location as this file and work from there. Implicit, if you reference a filename that doesn’t start with a slash, e.g. index.html is the same as ./index.html
  • ../ — double dot + slash. Start in the same location as this file, go out a folder, and work from there. Can be combined: ../../ — goes out two folders
  • / — slash at the beginning. Start at the root domain and work from there.
  • // — double slash at the beginning. Start immediately after the protocol, replacing all domains, and work from there.
  • https:// — protocol at the beginning. Start at the top level of the Internet, replacing everything, and work from there.
Wrapping Up

If a link or reference is outside of the project (eg. a website) absolute path is used. If a file within a project is be referred then, relative path is used.

Useful resources

While preparing this post, I have referred the following references extensively. Please to refer original posts for more detailed information.