HTML File Paths

❮ Previous Next ❯
Lesson 45 of 58

A file path tells the browser where to find a file. It is like an address for your images, CSS files, JavaScript files, or other web pages. If the path is wrong, the browser cannot find the file and things will break.

What is a File Path?

When you link to an image, a stylesheet, or another page, you need to tell the browser where that file lives. That is what a file path does.

There are two types of file paths:

  • Absolute paths – The full web address (like https://example.com/images/pic.jpg)
  • Relative paths – A shorter path relative to the current page (like images/pic.jpg)

Most of the time, you will use relative paths. They are shorter, cleaner, and still work if you move your website to a different domain.

Understanding Folder Structure

Before we talk about paths, you need to understand folder structure. Here is a typical website folder:

my-website/
├── index.html
├── about.html
├── contact.html
├── styles.css
├── script.js
├── images/
│   ├── logo.png
│   ├── photo.jpg
│   └── banner.jpg
└── pages/
    ├── services.html
    └── team.html

This is called a directory tree. It shows where every file lives. Understanding this will help you write correct file paths.

Relative File Paths (Most Common)

A relative path describes where a file is located in relation to the current page. It does not include the domain name (https://example.com).

Same Folder

If the file is in the same folder as your HTML page, just write the file name:

<img src="photo.jpg" alt="My photo">

Subfolder (one level down)

If the file is inside a folder, write the folder name, then a slash, then the file name:

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

Parent folder (one level up)

Use two dots .. to go up one level. Then a slash, then the file name:

<img src="../photo.jpg" alt="My photo">

Root of the website

Start with a forward slash to go to the root folder (the main folder of your website):

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

File Path Examples with Visuals

Let us say you have this folder structure:

current-page.html
images/
  └── logo.png

If you are in current-page.html and want to show logo.png:

Same folder? 
<img src="images/logo.png">

Because logo.png is inside the images folder, which is in the same folder as the HTML page.

Now let us say you have this structure:

folder1/
  ├── page.html
folder2/
  └── image.jpg

If you are in folder1/page.html and want to show folder2/image.jpg:

Go up then down 
<img src="../folder2/image.jpg">

.. goes up from folder1 to the root. Then folder2/image.jpg goes down into folder2.

Absolute File Paths (Full URLs)

An absolute path includes the full web address. It starts with “https://” or “http://”.

Absolute Path Example 
<img src="https://www.example.com/images/photo.jpg" alt="Photo">

Use absolute paths when linking to files on another website. For files on your own website, use relative paths instead.

Tip: Avoid absolute paths for your own files. If you change your domain name, all your absolute paths will break. Relative paths will keep working.

Common File Path Patterns

Here is a quick reference table:

Path Meaning Example
file.jpg Same folder as the HTML page <img src="logo.jpg">
folder/file.jpg Inside a subfolder <img src="images/logo.jpg">
/folder/file.jpg From the root of the website <img src="/images/logo.jpg">
../file.jpg One level up (parent folder) <img src="../logo.jpg">
../../file.jpg Two levels up <img src="../../logo.jpg">

Live Examples (Try Changing the Paths)

In this example, the image is in the same folder as the HTML file. The path is just the file name.

Same Folder Example

In a real website, you would have folders. Here is an example with an images folder:

Subfolder Example

Best Practices for File Paths

  • Use relative paths for all files inside your own website.
  • Keep your files organized – Put images in an “images” folder, CSS in a “css” folder, JavaScript in a “js” folder.
  • Use lowercase for folder and file names – Some servers are case sensitive. “Images” is different from “images”.
  • Do not use spaces in file names – Use hyphens or underscores instead. “my-photo.jpg” is good. “my photo.jpg” can cause problems.
  • Always test your paths – Open your HTML file in a browser and make sure all images and files load.

Recommended Folder Structure

my-website/
├── index.html
├── about.html
├── css/
│   └── styles.css
├── js/
│   └── script.js
└── images/
    ├── logo.png
    ├── banner.jpg
    └── gallery/
        ├── photo1.jpg
        └── photo2.jpg

With this structure, your paths would look like:

  • <link rel="stylesheet" href="css/styles.css">
  • <script src="js/script.js"></script>
  • <img src="images/logo.png" alt="Logo">
  • <img src="images/gallery/photo1.jpg" alt="Gallery photo">

Quick Summary

  • File paths tell the browser where to find files (images, CSS, JavaScript, other pages).
  • Relative paths are shorter and better for your own website.
  • Absolute paths are full URLs. Use them for external resources only.
  • ../ goes up one level.
  • / at the start means the root folder.
  • Keep your files organized in folders.
  • Do not use spaces or special characters in file names.

What Just Happened? Let Me Explain

  • File paths are one of the most common sources of errors for beginners. If an image does not show up, the path is usually wrong.
  • Always check the browser console (F12) for error messages. It will tell you exactly which file could not be found.
  • Relative paths are like giving directions: “go to the images folder, then get the file called logo.png”.
  • Absolute paths are like giving a full address: “123 Main Street, Austin, TX”.
  • When you work locally (just opening an HTML file on your computer), paths work the same way as on a live server.
Tip: Open VS Code and create a folder called “my-site”. Inside, create an “images” folder. Put a few images in the images folder. Create an index.html file. Use relative paths to display the images. Then create a subfolder called “pages” and put a second HTML file inside it. From that file, use ../ to go up and access the images folder. This is the best way to learn paths.

HTML File Paths Reference

Here are the file path patterns we covered in this chapter:

Path Pattern Description
file.jpg File in the same folder as the current page
folder/file.jpg File inside a subfolder
/folder/file.jpg File from the root of the website
../file.jpg File one level up (parent folder)
https://.../file.jpg Absolute path (full URL)
❮ Previous Next ❯
Lesson 45 of 58