HTML File Paths
A file path tells the browser where to find a file — an image, a stylesheet, a JavaScript file, or another HTML page. Writing file paths correctly is one of the most essential skills in HTML. A single wrong character in a path breaks images, links, and styles.
Why File Paths Matter
Every resource on a web page — images, CSS files, scripts, videos — loads through a file path. The browser reads the path and fetches the file from that location. If the path is wrong, the browser cannot find the file and your image shows a broken icon or your style does not load.
Two Types of File Paths
Absolute Paths
An absolute path is the full address from the very beginning — including the protocol, domain, and every folder along the way. It works from anywhere because it tells the complete story of where the file lives.
https://estudy247.com/images/logo.png https://www.example.com/css/style.css https://cdn.example.com/js/app.js
Relative Paths
A relative path describes the location of a file relative to the current HTML file's location. It does not include a domain or protocol — just folder names and file names.
images/logo.png ../css/style.css ./scripts/app.js
Understanding Relative Paths
Think of relative paths like giving directions using your current location as the starting point — "go one folder up, then into the images folder."
Visual Diagram — Website Folder Structure
mywebsite/
├── index.html
├── about.html
├── css/
│ └── style.css
├── images/
│ ├── logo.png
│ └── banner.jpg
└── pages/
├── contact.html
└── products.html
Same Folder
When the file is in the same folder as the HTML file, just write the file name.
<!-- index.html linking to about.html (both in mywebsite/) --> <a href="about.html">About</a>
Into a Subfolder
To reach a file inside a folder, write the folder name, a forward slash, then the file name.
<!-- index.html loading logo.png from images/ folder --> <img src="images/logo.png" alt="Logo"> <!-- index.html loading style.css from css/ folder --> <link rel="stylesheet" href="css/style.css">
Visual Diagram — Into Subfolder
You are at: mywebsite/index.html
File is at: mywebsite/images/logo.png
Path to write: images/logo.png
↑ ↑
folder file
Up One Folder Level (../)
Two dots followed by a forward slash (../) moves up one folder level. Use this when the file you need is in a parent or sibling folder.
<!-- contact.html is in pages/ folder --> <!-- It needs to load style.css from css/ folder --> <!-- css/ and pages/ are both inside mywebsite/ --> <link rel="stylesheet" href="../css/style.css">
Visual Diagram — Going Up with ../
You are at: mywebsite/pages/contact.html File is at: mywebsite/css/style.css Step 1: ../ → go up from pages/ to mywebsite/ Step 2: css/ → go into css/ folder Step 3: style.css → the file Full path: ../css/style.css
Up Two Folder Levels (../../)
Each pair of dots moves up one level. Use ../../ to go up two levels.
../../images/photo.jpg
From the Root (/) — Root-Relative Paths
A path starting with a single forward slash / starts from the root of the website — the top-level domain folder. This is not the same as the root of your computer's file system.
<img src="/images/logo.png" alt="Logo"> <link rel="stylesheet" href="/css/style.css">
Root-relative paths work the same on every page of your website regardless of how deeply nested the page is. They only work on a web server — not on local HTML files opened directly from your computer.
Path Examples in Different HTML Attributes
Images
<img src="images/photo.jpg" alt="Photo"> <img src="../images/banner.png" alt="Banner"> <img src="/images/logo.svg" alt="Logo"> <img src="https://example.com/img/hero.jpg" alt="Hero">
Links
<a href="about.html">About</a> <!-- same folder --> <a href="pages/contact.html">Contact</a> <!-- subfolder --> <a href="../index.html">Home</a> <!-- parent folder --> <a href="/courses/html/">HTML Course</a> <!-- root-relative --> <a href="https://google.com">Google</a> <!-- absolute -->
Stylesheets
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="../css/shared.css">
JavaScript
<script src="app.js"></script> <script src="js/main.js"></script> <script src="../scripts/utils.js"></script>
Absolute vs Relative — When to Use Each
Situation Use ------------------------------------ ---------------------------------- Link to another website Absolute URL Load resources from a CDN Absolute URL Resources within your own website Relative path Pages that work offline (local files) Relative path Root-level resources used everywhere Root-relative path (/)
Common File Path Mistakes
Wrong Slash Direction
HTML file paths always use forward slashes /. Backslashes \ are used in Windows file paths but do not work in HTML.
Wrong: src="images\photo.jpg" (Windows-style backslash) Correct: src="images/photo.jpg" (forward slash)
Wrong Case Sensitivity
Web servers on Linux are case-sensitive. A file named Logo.png is different from logo.png. Always match the exact case of your file and folder names.
File on server: images/Logo.png Path in HTML: images/logo.png ← will NOT find the file on Linux server Correct path: images/Logo.png ← matches exact file name
Missing Extension
Wrong: src="images/photo" Correct: src="images/photo.jpg"
Extra or Missing Slash
Wrong: src="//images/photo.jpg" (two slashes = protocol-relative URL) Wrong: src="images//photo.jpg" (double slash in middle) Correct: src="images/photo.jpg"
Checking Paths in the Browser
Open your page in a browser. Right-click the page and choose Inspect or open Developer Tools. Go to the Network tab and reload the page. Any file that fails to load shows in red with a 404 status code. Click on the failed request to see the full URL the browser tried to fetch — compare it with your intended file location to spot the error.
Getting file paths right from the start saves significant debugging time. Follow a consistent folder structure for all your projects and always use relative paths for resources that live within your own website.