Understanding which file path to use in your HTML, CSS, PHP, Python, or other web development language can be pretty confusing. Like driving in L.A. if you’re from Swoope, Virginia .
While developing a website, you’ll invariably type the path to an image or file incorrectly. So how do you know which path is correct?
All file paths boil down to two types; Absolute file paths and Relative file paths.
In basic terms,
- Absolute Path
The path begins at the computer’s root directory (or web root directory for HTML). 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/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">
<a href="html/index.html">HTML Page</a>
<?php include 'common/header.php'; ?>
<?php include 'gopher.php'; ?>
I created a more in depth tutorial for understanding file paths, both with HTML and PHP in mind.
You can check it out here: Understanding File Paths for Web Developers
If you have any questions or comments, feel free to reach out to me directly at email@example.com