Relative Paths vs Absolute Paths

What is a Path?

Whenever a program needs to read or write to files and directories, you will be working with paths. A path is where a file or directory is located on your file system. There are two kinds of paths: absolute and relative.

Absolute Paths

An absolute path is the full path to a file or directory. Absolute paths always start from the filesystem's root directory. The path is built containing each child directory leading to the file or directory you're working with.

This example shows the absolute path to a file called myblog.txt located in the myuser Documents directory:

# Unix
/home/myuser/Documents/Blogs/myblog.txt

# Windows
C:\Users\myuser\Documents\Blogs\myblog.txt

Absolute paths in Unix-based systems, such as Linux or MacOS, begin with the / symbol. This indicates the "root" of the filesystem.

Absolute paths in Windows always start with a drive letter. The C: drive is the default drive where the operating system, installed programs, and user files are stored.

Relative Paths

Relative paths are partial paths that begin from the current working directory. They start with the name of a directory or file and without any path symbols. For example, if the current working directory is the myuser home folder and you want to access the myblog.txt file. The relative path would be:

# Linux
Documents/Blogs/myblog.txt

# Windows
Documents\Blogs\myblog.txt

This is the file's location relative to the current working directory.

Relative Path Components

There are two additional navigation shortcuts used to construct a relative path. The first one is the . (dot) character, which represents the current working directory. Using the . character to create the relative path to our myblog.txt file would look like this:

# Linux
./Documents/Blogs/myblog.txt

# Windows
.\Documents\Blogs\myblog.txt

The second shortcut is used to access the parent directory. The parent directory is the directory one level above the current directory. It can be accessed using the .. (double dot) characters. In this example, we are working in the Blogs directory and want to access a file named tree.png. This file is located in a directory called Pictures, which is one level above our current directory.

# Linux
../Pictures/tree.png

# Windows
..\Pictures\tree.png

Which Path Should I Use?

When working with files, such as settings or log files, within a software application, these files are most likely going to be written using the relative path. This keeps files related to your application in the same working directory. Absolute paths are more commonly used when accessing files related to your operating system or files owned by another software program.

Paths on the Web

Websites are a collection of various types of files, such as HTML, images, CSS, etc., stored on the filesystem of the server. The paths here follow the same rules discussed above.

The path used to access the files from a client machine will start with the URL or IP address of the server, followed by the path and file.

https://byte-size.press/index.html

This is the fully qualified path to access the index.html page from the byte-size.press address.

A web developer who needs to link to this page from another page can use an <a> tag.

<a href="/index.html">Home</a>

This will link to the file called index.html from the "root" directory being served.

Relative paths can be used as well. From our index.html page, an image can be served from the img directory.

<img src="img/myimage.png">

Since the files being served exist in a directory structure, some files can be grouped in other directories. If we have a products directory and that contains several web pages to be served. The files we have shown so far would look like:

/index.html
/img/myimage.png
/products/product1.html
/products/product2.html

If we want to access image.png from the products pages, we can't write img/myimage.png anymore since img doesn't exist in the products directory. We need to use the .. syntax to form a relative path, or use an absolute path.

<!-- Relative path using .. -->
<img src="../img/myimage.png">

<!-- Absolute path -->
<img src="/img/myimage.png">

Using absolute paths in a web project will help prevent broken links if files are moved.

Conclusion

Absolute paths and relative paths are both used to access files and directories on a filesystem. Use an absolute path when you need the exact location of a file, and use a relative path when working with files that need to be accessed from the current directory. Websites also use paths to link to files and follow the same rules. Use absolute paths when linking to files on the web.