Lesson 19 of 22
HTML File Paths
Learn how HTML file paths work — the difference between absolute and relative paths, folder structure navigation, and practical examples for linking images, CSS files, and webpages.
HTML Course
In This Lesson
- What is a File Path?
- Two Types of Paths
- Absolute Path
- Relative Path
- Folder Navigation
- Complete Example
- Best Practices
- Try It Yourself
- Summary
- FAQ
Progress0/22
What You'll Learn
What an HTML file path is
Absolute vs relative paths
Folder structure navigation
./ same folder paths
../ parent folder paths
When to use each type
What is an HTML File Path?
An HTML file path is the address of a specific file on your computer or server. It tells the browser where to find external resources — images, CSS, JavaScript, and other HTML pages. File paths are used in src, href, and action attributes.
HTML — File Paths in Action
<!-- Image file path --> <img src="images/logo.png" alt="Logo"> <!-- CSS file path --> <link rel="stylesheet" href="css/style.css"> <!-- Link to another page --> <a href="pages/about.html">About Us</a> <!-- JavaScript file --> <script src="js/script.js"></script>
Two Types of File Paths
Absolute Path
Full URL from root
Starts with https://
Points to an exact internet location
Works from anywhere
Best for external resources (CDN, other sites)
Relative Path
From current file
No https:// — starts with folder or ./
Relative to the current HTML file's location
Works when files move together
Best for your own project files
Absolute File Path
An absolute path is the full URL of a file on the internet. Always starts with https:// or http://.
HTML — Absolute Paths
<!-- External image --> <img src="https://tipsinlearning.blogspot.com/images/logo.png" alt="TipsInLearning Logo"> <!-- External CSS (Google Fonts) --> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto"> <!-- External link --> <a href="https://tipsinlearning.blogspot.com"> Visit TipsInLearning </a>
Relative File Path
A relative path describes a file's location relative to the current HTML document. Use for your own project files — makes your project portable.
Imagine this is your project structure:
my-website/ ← root folder
index.html ← YOU ARE HERE
images/
logo.png
banner.jpg
css/
style.css
pages/
about.html
contact.html
HTML — Relative Paths from index.html
<!-- Image in images/ subfolder --> <img src="images/logo.png" alt="Logo"> <!-- CSS in css/ subfolder --> <link rel="stylesheet" href="css/style.css"> <!-- Page in pages/ subfolder --> <a href="pages/about.html">About Us</a> <!-- Same folder --> <a href="./contact.html">Contact</a>
Folder Navigation Syntax
filename.html
File in the same folder as current page
folder/file.html
Go INTO a subfolder to find the file
../file.html
Go UP one folder level to find the file
HTML — ../ Going Up a Level
<!-- You are in: pages/about.html You want: images/logo.png (one level up, then into images/) --> <img src="../images/logo.png" alt="Logo"> <!-- ../ = go up out of pages/ images/logo.png = into images/ folder --> <!-- Two levels up: ../../ --> <img src="../../images/logo.png" alt="Logo">
Complete Example
HTML — All Path Types Together
<!DOCTYPE html> <html lang="en"> <head> <!-- Absolute: external Google Font --> <link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet"> <!-- Relative: your own CSS --> <link rel="stylesheet" href="css/style.css"> </head> <body> <!-- Relative: image in images/ subfolder --> <img src="images/banner.jpg" alt="Banner"> <!-- Relative: same folder --> <a href="contact.html">Contact</a> <!-- Relative: page in subfolder --> <a href="pages/about.html">About</a> <!-- Relative: JS in js/ subfolder --> <script src="js/script.js"></script> </body> </html>
Best Practices
File Path Rules to Follow:
- ✓ Use relative paths for your own files (images, CSS, JS, HTML pages)
- ✓ Use absolute paths for external resources (Google Fonts, CDN, other sites)
- ✓ Use lowercase for all filenames — servers are case-sensitive
- ✓ No spaces in filenames — use hyphens: my-image.png not my image.png
- ✓ Organise files: images/ css/ js/ pages/
- ✗ Never use local paths like C:\Users\name\file.html — only works on your PC
Try It Yourself
Challenge — Build a Project File Structure
1Create a folder my-website/ with an index.html file inside
2Create an images/ subfolder with any image — link it using a relative path
3Create pages/about.html — link it from index.html with href="pages/about.html"
4In about.html, link back using href="../index.html" (go up one level)
5Add Google Fonts in the <head> using an absolute path
Quick Summary
1File paths tell the browser where to find images, CSS, JS, and HTML pages
2Absolute path — full URL starting with https://; works from anywhere
3Relative path — relative to current file; best for your own project files
4folder/file = go into folder | ../ = go up one level
5Always lowercase filenames, no spaces — use hyphens instead
6Organise files into images/ css/ js/ folders for clean projects
Questions Beginners Ask
Common questions about HTML file paths:
Why is my image not showing up?
The three most common causes: (1) The file path is wrong — double-check the folder name, filename, and extension exactly. Paths are case-sensitive on most servers. (2) The file doesn't exist at that location — check your project folder. (3) You're using a local path like C:\Users\... — this only works on your own computer, not on a server. Use relative paths instead.
When should I use relative vs absolute paths?
Use relative paths for any file that is part of your own project — images, CSS, JavaScript, other HTML pages. Use absolute paths for external resources — Google Fonts, Font Awesome CDN, images from other websites, or any resource hosted on a different server. Relative paths make your project portable; absolute paths rely on the external URL staying valid.
What does ./ mean in a path?
./ means 'the current directory' — the folder where the current HTML file lives. For example, ./style.css and style.css both point to the same file in the same folder. You can use either — ./ just makes it more explicit that you're referencing the current directory.
Does capitalisation matter in file paths?
Yes — on Linux and Mac servers (where most websites are hosted), file paths are case-sensitive. images/Logo.png and images/logo.png are two different files. This is a very common mistake: files work fine locally on Windows (which ignores case) but break when uploaded to a server. Always use lowercase consistently.
Why does my path work locally but break on the server?
Two common reasons: (1) Case sensitivity — Windows ignores case but Linux servers don't. Check all your filenames. (2) You used an absolute local path like C:\Users\name\projects\... — this path only exists on your computer. On the server it doesn't exist at all. Always use relative paths for your own project files.