Lesson 2.8: Relative vs. Absolute File Paths
Relative vs. Absolute File Paths
Every broken image and missing stylesheet traces back to a wrong file path. Learn exactly how paths work — and which type to use — so your links never break.
Lesson Objectives
- Understand what a file path is and why it matters
- Explain the difference between relative and absolute paths
- Write relative paths to link files in the same folder, a subfolder, and a parent folder
- Know when to use an absolute URL vs. a relative path
- Apply correct paths to
href,src, andlinkattributes - Diagnose and fix broken path errors
Part 1: What Is a File Path?
Any time your HTML needs to reference another file — an image, a CSS stylesheet, another webpage, or a downloadable PDF — it uses a file path to tell the browser exactly where to find it. Think of a file path like a street address: it describes the location of a file within a folder structure on your computer or web server.
There are two fundamentally different types of paths: relative paths and absolute paths. Understanding the difference between them — and knowing which to use when — is one of the most practical skills in web development. Every broken image or missing stylesheet you've ever seen was caused by a wrong file path.
src attribute of <img> and <script> tags, the href attribute of <a> and <link> tags, and the action attribute of forms. The same rules apply in all of these places.
Part 2: Understanding Your Project's Folder Structure
Before writing any path, you need a mental picture of your project's folder structure — which files are in which folders and how they relate to each other. All relative paths are calculated from the location of the current file doing the linking.
All the examples in this lesson assume you are working from index.html at the root of this project. The paths you write tell the browser how to navigate from that file to any other file in the structure.
Part 3: Relative vs. Absolute Paths — The Key Difference
Relative to the current file's location. Think of it as directions from where you are right now — "go into the images folder and grab profile.jpg."
Does not start with https:// or /. Always describes a location in relation to the file doing the linking.
Example: images/profile.jpg
Use for: All files within your own project — images, stylesheets, other HTML pages, downloads.
The full, complete address from the beginning. Like a GPS coordinate — it works from anywhere, no matter where you are.
Always starts with a protocol: https:// or http://. Specifies the exact location on the entire internet.
Example: https://example.com/images/logo.png
Use for: External websites, images or resources hosted on other servers, CDN-hosted libraries.
Part 4: Writing Relative Paths — All Four Patterns
Relative paths have four distinct patterns depending on where the target file lives in relation to the current file. Using the project structure from Part 2, with index.html as the starting point:
href="about.html"
When the target file is in the same folder as the current file, just use the filename. No folder prefix needed.
src="images/profile.jpg" or href="pages/contact.html"
Use the folder name followed by a forward slash /, then the filename. You can nest multiple levels deep: assets/images/icons/star.png
href="../index.html"
The ../ prefix means "go up one folder level." Used when your current file is inside a subfolder (like pages/contact.html) and needs to reference something in the parent folder.
href="/index.html" or src="/images/logo.png"
A leading / means "start from the root of the website" — not the root of the whole computer, but the top-level public folder of the web server. Useful on multi-page sites but doesn't work when opening files locally.
Part 5: When to Use Absolute Paths
Absolute paths are the right choice any time you're referencing a resource that lives outside your own project — on a different server or domain. They are also the only option when linking to external websites, loading fonts from Google Fonts, or using a CDN-hosted library.
| Situation | Use | Example |
|---|---|---|
| Linking to another page in your project | Relative | href="about.html" |
| Displaying an image from your images folder | Relative | src="images/photo.jpg" |
| Linking your CSS stylesheet | Relative | href="style.css" |
| Offering a file download from your project | Relative | href="files/resume.pdf" |
| Linking to an external website | Absolute | href="https://example.com" |
| Loading a Google Font or CDN library | Absolute | href="https://fonts.googleapis.com/..." |
| Displaying an image from another server | Absolute | src="https://example.com/img.jpg" |
Part 6: Common Path Mistakes & How to Fix Them
Images/ or images/ — it's forgiving. But web servers (running Linux) are case-sensitive. A path that works perfectly on your laptop can break the moment you upload to a hosting service. Always use all lowercase for folder and file names.
🖥️ Code Skills Lab Reminder
Student Activity
Practice File Paths in Your Project — Code Skills Lab
Open your project in the Code Skills Lab. You're going to audit and improve all the file paths in your index.html — making sure every image, stylesheet, and link uses the correct path type. Work through each step carefully!
-
Map your project structure. Before writing any paths, open the file explorer panel in the Code Skills Lab and sketch (or mentally note) where every file in your project lives. Confirm you have an
images/folder and that your images are inside it./* Your project should look like this: */ my-project/ ├── index.html ← working from here ├── about.html ├── style.css ├── images/ │ └── profile.jpg └── files/ └── resume.pdf -
Check your CSS link path. In your
<head>, confirm your stylesheet is linked with a relative path. Ifstyle.cssis in the same folder asindex.html, the path is just the filename.<head> <!-- style.css is in the same folder as index.html --> <link rel="stylesheet" href="style.css"> </head>💾 Save — your styles should still apply correctly! -
Audit your image paths. Look at every
<img>tag in your file. If your images are in animages/subfolder, eachsrcshould start withimages/. Fix any that are missing the folder prefix.<!-- Image INSIDE the images/ subfolder --> <img src="images/profile.jpg" alt="Portrait of Jordan smiling outdoors" width="150" height="150"> <!-- NOT just: src="profile.jpg" --> <!-- The browser won't find it there! -->💾 Save — all images should appear in the preview. Any broken icon means the path is wrong. -
Add an internal link to a second page. Create a new file called
about.htmlin your project (it can be a basic HTML shell). Then add a relative link fromindex.htmlto it.<!-- about.html is in the same folder as index.html --> <a href="about.html">Learn more about me</a>💾 Save — clicking the link should open about.html. -
Verify your external links use absolute paths. Find any links that go to outside websites in your HTML. Confirm each one starts with
https://. If any start with justwww., fix them by addinghttps://.<!-- ❌ Wrong — missing https:// --> <a href="www.codecademy.com">Codecademy</a> <!-- ✅ Correct — full absolute URL --> <a href="https://www.codecademy.com" target="_blank" rel="noopener noreferrer"> Visit Codecademy </a>💾 Save — external links should now open correctly in a new tab.
🌟 Bonus Challenges
Push your path skills further:
1. Create a pages subfolder and move about.html into it. Then update the link from index.html to use the subfolder path, and add a "back to home" link from inside about.html using ../ to go up a level:
2. Intentionally break a path (change images/ to imgs/), save, and observe the broken image icon. Then fix it and confirm it comes back. This is exactly how you'd diagnose a real-world path error.
3. Load a Google Font using an absolute path — add this to your <head> and update your CSS font-family to use it:
💾 Remember to save after each change to see the result!
Troubleshooting Tips
-
Broken image icon showing? The
srcpath is wrong. Check: (1) Is the folder name spelled correctly and in the right case? (2) Is the filename spelled correctly including the extension (.jpg,.png)? (3) Is the file actually saved in that folder? -
CSS stylesheet not applying? Check the
hrefin your<link>tag. Ifstyle.cssis in the same folder as your HTML file, the path should be just"style.css"— not"css/style.css"unless you've moved it into a subfolder. -
Internal link goes to a blank page or 404? The filename in
hrefmust match the actual file name exactly — including the.htmlextension and letter case. Also verify the file exists in the location the path describes. -
External link not working — browser looking for a local file? You've used a relative-style path for an external link. External links must start with
https://. Without it, the browser interprets the path as local, e.g.,"www.google.com"looks for a folder named "www.google.com" in your project. -
Can't navigate back to the parent folder? Use
../to go up one directory level. Each../moves up one folder. From two levels deep you'd use../../to reach the root.
Lesson Summary
| Concept | Example | Use When |
|---|---|---|
| Relative — same folder | href="about.html" | Target file is in the same folder as the current file |
| Relative — subfolder | src="images/photo.jpg" | Target is inside a subfolder of the current location |
| Relative — parent folder | href="../index.html" | Current file is in a subfolder; target is in the folder above |
| Relative — root-relative | href="/style.css" | Referencing from the website root — only works on a live server |
| Absolute URL | href="https://example.com" | Linking to any resource on another domain or server |
| Lowercase rule | images/photo.jpg ✓ | Always — web servers are case-sensitive; uppercase breaks paths |
| No spaces rule | my-photo.jpg ✓ | Always — spaces in filenames break paths; use hyphens instead |
Knowledge Check
Read each question carefully and select the best answer. Each question has one correct response.
1. You're working in index.html and want to display an image called banner.jpg that is saved inside a folder named images/. Which src value is correct?
2. You're editing pages/contact.html and want to link back to index.html, which is in the parent folder. Which path is correct?
3. Which path type should you use when linking to an external website like Wikipedia?
4. A page works perfectly on your laptop, but after uploading to a web server all images are broken. The images are referenced as src="Images/photo.jpg". What is the most likely cause?
5. Which of the following is the correct relative path to link a CSS file named style.css that is stored in the same folder as your HTML file?
Lesson Checklist
- I can explain the difference between a relative and an absolute file path
- All images in my project use relative paths with the correct subfolder prefix
- My CSS stylesheet is linked with a relative path from my HTML file
- I added an internal link to another page in my project using a relative path
- All external links use full absolute URLs starting with
https:// - All file and folder names in my project use lowercase letters with no spaces
- I understand what
../means and when to use it - I saved my file in the Code Skills Lab after each change