File paths

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 ammon@virginia.edu