HTML File Paths

A file path tells the browser where to find a file — an image, a stylesheet, a script, or another web page. Getting paths right in <a href>, <img src>, and <link href> is one of the most common sources of "broken link" and "image not showing" bugs for beginners.

1) Absolute File Path


<img src="https://codingwithsonu.com/asset/images/logo.png" alt="Logo">
<a href="https://codingwithsonu.com/html/html-intro.php">HTML Introduction</a>

An absolute path is a full URL, including the protocol (https://) and domain name. It always points to the exact same location, no matter where the linking page lives — but it breaks if the site's domain ever changes.

2) Root-Relative File Path


<link rel="stylesheet" href="/asset/css/style.css">
<a href="/html/html-intro.php">HTML Introduction</a>

A path starting with a single / is root-relative. It always resolves from the domain's root folder, regardless of which page it is used on, but it still depends on the current domain (no protocol or hostname included).

3) Relative File Path


<!-- File in the same folder -->
<a href="html-tables.php">HTML Tables</a>

<!-- ./ means "the current folder", same as above -->
<a href="./html-tables.php">HTML Tables</a>

<!-- File in a sub-folder -->
<img src="images/banner.jpg" alt="Banner">

<!-- ../ means "go up one folder" -->
<link rel="stylesheet" href="../asset/css/style.css">

A relative path describes the location of a file relative to the current page. ./ means "this folder", a plain folder name means "go into that sub-folder", and ../ means "go up one folder level". You can chain ../../ to go up multiple levels.

4) How ../ Resolves: A Folder Diagram

codingwithsonu/
├── asset/
│   └── css/
│       └── style.css
├── ads/
│   └── ads-banner.php
├── ad-first.php
└── html/
    └── html-filepaths.php   <-- you are here

From html/html-filepaths.php, the folder html/ is the "current folder". To reach style.css, the browser must first go up one level with ../ (out of html/ and into codingwithsonu/), then down into asset/css/:


<link rel="stylesheet" href="../asset/css/style.css">

The same logic applies to ../ads/ads-banner.php and ../ad-first.php — both go up one level from html/ before descending back into the target file or folder.

A Real Example From This Site

Every tutorial page on Codingwithsonu.com, including this one, sits inside the html/ folder and uses relative ../ paths to reach shared files at the site root. For example, this very page includes its advertisement banner with:

<?php include_once('../ads/ads-banner.php'); ?>

The ../ tells PHP to step out of the html/ folder and into the ads/ folder at the root of the project — exactly the same rule that applies to relative paths in plain HTML.

Best Practices:

  • Prefer relative paths for files that belong to your own project — they keep working when you move the site between local, staging, and production servers.
  • Use absolute paths only when linking to a resource on a different domain.
  • Root-relative paths (starting with /) are convenient for large sites where every page should reference assets the same way, but remember they still assume the same domain.
  • Count your folder levels carefully — one extra or missing ../ is the most common cause of broken images and stylesheets.
  • File paths on Linux servers are case-sensitive, even though Windows is not — always match the exact case of file and folder names.