HTML File Paths

HTML Tutorial

 HTML File Paths

HTML File Paths tell the browser where a file is located (images, CSS, JavaScript, videos, etc.).

Correct file paths are essential—a small mistake and your image/CSS/JS won’t load.

 1. What Is a File Path?

A file path specifies the location of a file inside your website/project.

Used in tags like:

 2. Types of File Paths

There are two main types:

 Relative File Path (Most Common)

  • Based on the current HTML file

  • Short and portable

  • Recommended for websites

 Absolute File Path

  • Full URL or full system path

  • Not recommended for local projects

 3. Relative File Paths (Important )

 Example Folder Structure

project/
│── index.html
│── about.html
│── css/
│ └── style.css
│── js/
│ └── app.js
│── images/
│ └── logo.png

 Same Folder

<img src="logo.png">

 Inside a Folder

 Go One Level Up (../)

<img src="../images/logo.png">

../ means go back one folder

 Go Two Levels Up

<img src="../../images/logo.png">

 4. Absolute File Paths

 Website URL (Allowed but not ideal)

<img src="https://example.com/images/logo.png">

 Local System Path (Bad Practice)

<img src="C:\Users\Sanjit\Desktop\logo.png">

 Works only on your computer, not on the web

 5. Root-Relative Paths (/)

Root-relative paths start from the website root.

<img src="/images/logo.png">
  •  Useful in large websites
  • Needs correct server root

 6. File Paths for Common Elements

 CSS

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

 JavaScript

<script src="js/app.js"></script>

 Image

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

 Link to Another Page

<a href="about.html">About</a>

 7. File Paths from Subfolders

If about.html is inside a folder:

pages/
└── about.html

To load CSS:

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

Common Mistakes

  •  Wrong folder name
  • Missing ../ 
  •  Using backslashes \ instead of /
  •  Case mismatch (Logo.png ≠ logo.png)
  •  Using absolute system paths

 Quick Reference

SymbolMeaning
file.jpgSame folder
folder/file.jpgInside folder
../file.jpgOne folder up
/file.jpgFrom root
https://Absolute URL

 Key Points to Remember

  • Prefer relative paths

  • Use / (not \)

  • Paths are case-sensitive

  • Match folder structure exactly

  • Test paths carefully

You may also like...