When building a website, or when pointing from a file to external references (AutoCAD XREFs for example) it is common to stumble upon the concept of relative paths.

The concept is very simple, but it requires you to stop for a second and learn it. In this tutorial, I give a few examples to help you understand relative paths.

What’s a Path

A path is a text used to uniquely identify a location in a directory structure (think of it as the location of a file or folder in your computer). When opening a folder with your file manager (File Explorer, Finder, etc.) usually you can see the path of that folder at the top of the window.

The path of your desktop in a Windows machine could look like this:

C:\Users\John\Desktop

And in a Mac, it could look like this:

/Users/jane/Desktop

Different types of paths

Before we said the path tells you where something is. But it can also tell you that information in different ways.

The examples of paths above show you how to find the Desktop starting from the top-level directory (C: in Windows, and / in Mac). That’s what we call an Absolute path - a path that contains all the information you need to identify the location you’re looking for.

An Absolute path contains all the information you need to identify a location

A relative path doesn’t give you all the information you need. It tells you how to find a location in relation to the current location. That “current location” is an absolute path (the information we were missing!), and is used as a reference to build the new path.

A relative path by itself can’t identify a location. It is like if you asked me where do I live and I answered “I live next to Susan”, but you don’t know where Susan lives.

A relative path points to a location using as a reference the current location

Let’s see it in an example:

Relative paths example

I will use the terminal for this example because the cd command to change the directory accepts both relative and absolute paths.

I have a directory called dir0 on my Desktop. I will start by changing into that directory using an absolute path:

cd /home/user/Desktop/dir0

Inside that directory, I have prepared a few other folders (see tree below). I will change into these directories using relative paths.

dir0
├── dir1
│   └── dir2
└── dir3
    └── dir4
        └── dir5

I am currently on dir0. I will change into dir1 using the relative path./dir1. The ./ means “current directory” (dir0).

cd ./dir1

Now I am on dir1. I will change into dir3 using the relative path ../dir3. The ../ means “one folder up” - I am going back up to dir0 and down to dir3.

cd ../dir3

Now I am on dir3. I will go down to dir5 using the relative path ./dir4/dir5/. I am using ./ again, which means “current directory” (dir3).

cd ./dir4/dir5/

Finally, I am now on dir5. I will go to dir2 using the relative path ../../../dir1/dir2/. I use ../ three times because I need to go three folders up (dir4, dir3, and dir0) before going down again.

cd ../../../dir1/dir2/

Relative paths example between files

The example above allows you to see how to point to a directory using the current one as a reference with relative paths. Usually, you will work with files: you point to a file from your working file. To explain this, I created a simple website that gives examples of relative paths between files; you can access it using the link below:

https://paths.aloneinthesea.com/

Cheat sheet

To successfully use relative paths, remember these two rules:

  • ./ means “current directory” (the directory containing your current file).
  • ../ means “directory containing the current directory”, and it works more than once: ../../ means “the directory containing the directory that contains the current”.