HTML File Paths - A Complete Guide

Previous Next

In previous lessons we wrote src="/assets/images/logo.png" or href="about.php". These are called file paths. Understanding paths correctly is the difference between a site that works 100% and a site full of broken images and dead links.

What Is a File Path?

A path is the address that tells the browser: "The file you want is here." Just like a mailing address - without a precise address, your message will not arrive.

A path is used in:

<img src="..."> - image path
<a href="..."> - linked page path
<link href="..."> - CSS file path
<script src="..."> - JavaScript file path

Type 1: Absolute Path

An absolute path is the full address of the file - including protocol, domain, and file path. It can be accessed from anywhere in the world.

<!-- Absolute path to an external image -->
<img src="https://www.devarabi.com/assets/images/logo.png" alt="DevArabi logo">

<!-- Absolute path to a link -->
<a href="https://www.devarabi.com/courses/html/intro.php">HTML Course</a>

Absolute paths are good for external files (other websites). But for your own site files - do not use them.

Why not use absolute paths inside our site? They include the domain name. If you move from localhost to a real server or change the domain name, all your paths will break. Relative paths adapt automatically.

Type 2: Relative Path

A relative path depends on the current file location as the starting point. It does not include the domain name - it starts from the page folder or from the site root.

There are four common cases:

Case 1: File in the Same Folder

<!-- Current file: /courses/html/index.php -->
<!-- Image: /courses/html/banner.jpg -->

<img src="banner.jpg" alt="Banner">
<!-- Or explicitly: -->
<img src="./banner.jpg" alt="Banner">

Case 2: File in a Subfolder

<!-- Current file: /courses/html/index.php -->
<!-- Image: /courses/html/images/photo.jpg -->

<img src="images/photo.jpg" alt="Photo">

Case 3: File in a Parent Folder - `../`

<!-- Current file: /courses/html/index.php -->
<!-- Image: /courses/shared-image.jpg -->

<!-- ../ means: "go back one folder" -->
<img src="../shared-image.jpg" alt="Shared image">

<!-- Two levels back -->
<img src="../../assets/logo.png" alt="Logo from root">

Case 4: From the Site Root - `/`

<!-- Starts from the site root regardless of the current page location -->
<img src="/assets/images/logo.png" alt="Logo">
<a href="/index.php">Home Page</a>
<link rel="stylesheet" href="/assets/css/style.css">

Golden tip: In real projects, use root-based paths / for CSS, JavaScript, and shared images. This works correctly no matter where the page sits in the site structure.

Summary Table - All Path Types

Path	Meaning	Example
`file.jpg`	Same folder as the current page	Image and page in the same folder
`./file.jpg`	Same folder (explicit)	Same as above but clearer
`images/file.jpg`	Subfolder inside the current folder	Go into the images folder
`../file.jpg`	One folder up	Go back one level
`../../file.jpg`	Two folders up	Go back two levels
`/assets/file.jpg`	From the site root	Starts at the top of the site structure
`https://...`	External absolute path	File from another site

Practical Example - A Real Project Structure

Imagine this project structure:

my-website/
|-- index.html
|-- about.html
|-- assets/
|   |-- css/
|   |   `-- style.css
|   |-- js/
|   |   `-- main.js
|   `-- images/
|       |-- logo.png
|       `-- banner.jpg
`-- courses/
    `-- html/
        `-- intro.html

From the file courses/html/intro.html, how do we reach each file?

<!-- From courses/html/intro.html -->

<!-- CSS - from the root (best) -->
<link rel="stylesheet" href="/assets/css/style.css">

<!-- Or relative with ../ -->
<link rel="stylesheet" href="../../assets/css/style.css">

<!-- Site logo -->
<img src="/assets/images/logo.png" alt="Logo">

<!-- Link to the home page -->
<a href="/index.html">Home Page</a>

<!-- Link to a page in the same folder -->
<a href="basic.html">Lesson Two</a>

Common Mistakes to Avoid

Case sensitivity: On most servers (Linux), Photo.jpg is different from photo.jpg. Always use lowercase.
Spaces in file names: Avoid my photo.jpg and use my-photo.jpg instead.
Confusing / and ./: /logo.png starts from the site root. ./logo.png looks in the same folder.
Forgetting the extension: Write photo.jpg, not just photo.

Frequently Asked Questions - FAQ

What is the difference between / at the start and ./?

/ means start from the site root (the top-level folder). ./ means start from the current page folder. In most cases you can omit ./ because it is implicit.

How do I know how many ../ I need?

Count the depth of the current page. If the page is at courses/html/page.html, it is at depth 3. Each ../ moves you up one level. To reach the root you need ../../.

Do paths work the same on Windows and Linux?

Windows uses \ in local paths, but in HTML we always use / - and it works on all systems. The key difference: Linux is case-sensitive, Windows is not. So stick to lowercase to avoid surprises when deploying to a server.

Great! You have now mastered file paths and will avoid broken images and links. In the next lesson we will learn tables - how to organize data into rows and columns.