many paths crossing - Photo by Victor Charlie on Unsplash

Understanding File Paths

There are two types of file paths to understand when building websites: Absolute Paths and Relative Paths

In very general terms, the paths can be defined as such:

Absolute Path

The path begins at the computer's root directory. If the path begins with a forward slash / or the full HTTP protocol, then it is an absolute path.

<link rel="stylesheet" href="/css/style.css">
<a href="http://coolwebsite.com/html/index.html">HTML Page</a>
<?php include '/var/www/coolwebsite/common/header.php'; ?>
<?php include $_SERVER['DOCUMENT_ROOT'] . 'common/header.php'; ?>
Relative Path

The path is relative to the folder where the file lives. If the path begins with a double period .. or NO forward slash /, then it is a relative path.

<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="css/style.css">
<a href="html/index.html">HTML Page</a>
<?php include 'common/header.php'; ?>
<?php include 'gopher.php'; ?>

HTML

In HTML, file paths are associated with the web root, the folder where the files for the website are located. The web root folder is mapped to the domain name. If the website is not using a framework that utilizes routing, then the forward slashes in the URL reference folders in the web root.

PHP

In PHP, file paths are associated with the file system of the computer. The root directory in a PHP file path maps to the the root directory of the computer.