Absolute path vs. relative path

We will often encounter paths when creating web pages. Paths will define where the HTML files, images, or other content are located when linked on our web page.

To understand an absolute or relative path, we need to define what a path is.

A path is an entity; in our case, when creating web pages, it is a subfile, directory, or address of a web page that specifies a unique location within a hierarchical structure of directories or web pages.

Windows hierarchical structure

C:/
├── Users/
│   └── michal/
│       ├── Downloads/
│       ├── Documents/
│       └── Development/
│           └── Web.Technologies.Course/
│               ├── images/
│               │   ├── logo.png
│               │   ├── blog_image.png
│               │   └── map.png
│               ├── pages/
│               │   ├── about.html
│               │   ├── blog.html
│               │   └── contact.html
│               └── index.html
└── Windows/
    └── files & directories of the operating system

Hierarchical structure in Linux/MacOS/UNIX

/
├── Users/
│   └── michal/
│       ├── Downloads/
│       ├── Documents/
│       └── Development/
│           └── Web.Technologies.Course/
│               ├── images/
│               │   ├── logo.png
│               │   ├── blog_image.png
│               │   └── map.png
│               ├── pages/
│               │   ├── about.html
│               │   ├── blog.html
│               │   └── contact.html
│               └── index.html
└── System/
    └── files & directories of the operating system

As I have mentioned, the paths can be 2 kinds:

• absolute
• relative

To define what these types of paths represent, it is necessary to define the concept of a working directory.

Each program or web page defines a specific directory in which you are supposed to work as a working directory.

It is the directory from which your IDE or server on which your subroutines are located will identify the paths to the subroutines or files in your source code.

Absolute path

The absolute path (the full path) contains all information about the entity and its location. This location starts at the root directory and ends with the location of the entity with its full name.

Root directories differ based on the operating system. Linux/MacOS/UNIX has a root directory at the beginning of the directory tree, marked /. In Windows, the root directory is labeled with the name of the disk, for example, C:\ or D:\, Z:\.

The working directory does not influence the absolute path; therefore, the directory we work in and the file we are currently editing are located.

Ked sa pozrieme na priklady hierarchickych struktur, zistime, ze absolutna cesta pre subor logo.png je nasledovna:

Windows:
C:\Users\michal\Development\Web.Technologies.Course\images\logo.png

Linux/MacOS/UNIX
/Users/michal/Development/Web.Technologies.Course/images/logo.png

URLs
https://drobny.dev/blog

https://www.paneurouni.com/en/international-relations/projects-and-partnerships/

The previous examples show that the root directory is C:/ for Windows and / for Linux/MacOS/UNIX.

Absolute paths are easier to understand. They clearly define the location of the subfile, but working with them when creating web pages is unsuitable because when you upload your project to the server, the absolute location of the subfile will change. Absolute paths that define the location on your computer will not work.

URLs

The specific type of absolute path is a URL. As stated at w3cschools.com, URL is another word for web address.

Relative path

A relative path is an entity that defines the location of a subfile relative to your working directory. The relative path does not consider the information needed to determine the working address relative to the root directory. It only determines the path from your working directory to the subdirectory or file.

To work with relative paths, we must understand the notation of the single dot . and the double dot ... Relative paths use this notation initially, followed by a separator in Windows \ and in Linux\MacOS\UNIX /. A single dot indicates the current directory, and a double dot indicates the parent directory.

Let’s take an example to understand better what precisely relative paths define. If we define our working directory as C:\Users\michal\Development\Web.Technologies.Course or /Users/michal/Development/Web.Technologies.Course, then the relative path to the logo.png subfile is ./images/logo.png.

Although relative paths offer less information about the location of a file, they are easier to work with and are used for their generality in references to subfiles in the source code.