HTML Paths Guide
The Map to Your Website's Resources
File paths are one of those things that look trivial until you get one wrong and spend twenty minutes staring at a broken image icon wondering why the file isn't there when you can clearly see it in your folder. Every link and every embedded image requires a path - an address the browser follows to find that resource - and the wrong path is the browser equivalent of getting told to turn left when you should turn right. There are two kinds of paths: absolute, which include the full URL including the domain, and relative, which describe how to get from the current file to the target file. Understanding when to use each one saves you from broken links and missing assets across the lifetime of a project.
What is a Path?
A path is the string of text that tells the browser where a file lives - which folder it's in, what it's called, how to get there from wherever the browser currently is. Paths show up in the src attribute of img tags, the href attribute of anchor and link tags, and anywhere else you're referencing an external file. To make the examples concrete, here's the folder structure we'll use throughout this guide.
1my-website/
2├── index.html
3├── about.html
4├── styles/
5│ └── main.css
6├── images/
7│ ├── logo.png
8│ └── team-photo.jpg
9└── blog/
10 ├── index.html
11 └── first-post.html1. Absolute Paths
An absolute path includes the full URL - protocol, domain, and file path - and points to a specific location on the internet regardless of where the current document is. If you move your website to a different domain or reorganize your folder structure, absolute paths to external resources stay correct because they don't depend on context. Use absolute paths for links to other websites, resources loaded from CDNs, and any situation where you need the full URL because context-independence matters. The one trap with absolute paths to your own site's internal resources is that they break if you move to a new domain - every internal link needs updating, which is why relative paths are preferred for within-site navigation.
1<!-- Linking to an external website -->
2<a href="https://www.wikipedia.org">Visit Wikipedia</a>
3
4<!-- Embedding an image from an external source -->
5<!-- Note: hotlinking someone else's image steals their bandwidth -->
6<img src="https://other-site.com/images/their-logo.jpg" alt="Their logo">
7
8<!-- Linking to your own site from an external platform -->
9<a href="https://www.yourwebsite.com/">Home</a>
10
11<!-- Loading a CSS file from a CDN -->
12<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">A Note on Hotlinking
Bandwidth cost- Linking directly to an image hosted on someone else's server uses their bandwidth without permission - every time your page loads, their server pays the cost.No control- You have no control over the image. The owner can delete it, change it, or replace it with something completely different, and your page has no warning.Performance- The browser has to make a separate request to a different server, which adds latency and makes your page load slightly slower.
2. Relative Paths
A relative path describes how to get from the current file's location to the target file, without including the domain. The browser calculates the full URL by combining where the current page is with the relative path you provided. This is the standard approach for linking between pages and assets within your own website, and it's more practical than absolute paths for internal links because the whole site moves together - if you rename your domain or run it on localhost during development, all the relative paths still work without changing anything.
1<!-- From index.html in the root folder -->
2<a href="about.html">About Us</a> <!-- same folder -->
3<img src="images/logo.png" alt="Logo"> <!-- subfolder -->
4<a href="blog/index.html">Visit our Blog</a> <!-- subfolder -->
5
6<!-- From blog/first-post.html -->
7<a href="index.html">All Blog Posts</a> <!-- same folder -->
8<a href="../index.html">Go Back Home</a> <!-- one level up -->
9<img src="../images/logo.png" alt="Logo"> <!-- one level up, then into images -->Relative Path Syntax
filename.ext- No prefix means the file is in the same folder as the current HTML file. The simplest case.folder/filename.ext- The file is inside a subfolder of the current folder. You can chain these: images/2024/photo.jpg.../filename.ext- Go up one level to the parent folder, then look for the file there. Use ../../ to go up two levels./filename.ext- Root-relative path - starts from the website's root regardless of where the current file is. Useful but can break if the site isn't hosted at the root of the domain.
Absolute vs Relative Paths: Quick Comparison
The practical decision is usually simple: relative paths for everything within your own site, absolute paths for everything outside it. The one exception is CDN-hosted libraries and fonts, which always need absolute paths since they're hosted externally.
1<!--
2Feature | Absolute Paths | Relative Paths
3------------------|-----------------------------|---------------------------
4Definition | Full URL to the resource | Path from current file
5Starts with | http://, https://, // | filename, ./, or ../
6Best for | External sites, CDNs | Internal links within site
7Portability | Breaks if domain changes | Survives domain changes
8Dev environment | Needs correct domain | Works on localhost
9Example | https://site.com/logo.png | ../images/logo.png
10-->Best Practices
Use relative paths for all internal links and assets - this is the most important rule and it's the one that makes moving your site from development to production painless. When you're working locally on your computer and then upload to a live server, relative paths keep working without any changes. Absolute internal paths would all need updating if your domain changes. Be consistent with whether you use ./ or just the filename for same-folder references - both work, but mixing them makes the code harder to read. After building a page, click every link you added to verify the paths are right. Broken links are one of the more embarrassing things to discover after launch and relative path miscalculations are the most common cause.
Key Recommendations
Relative for internal, absolute for external- This simple rule covers 95% of decisions. Internal pages and assets use relative paths. External websites and CDN resources use absolute paths.Be consistent with notation- Choose whether to use ./ or nothing for same-folder files and stick with it. Both work but mixing them reduces readability.Test every link- Click every link after adding it, especially after folder reorganization. Relative path bugs are invisible until someone visits the broken page.Root-relative paths with caution- Paths starting with / work from the site root and are predictable, but they break if your site is hosted in a subdirectory rather than the domain root.
Paths: A Simple Rule That Saves Hours
The mental model that makes paths click is thinking of them as directions from where you are right now. An absolute path is like a full postal address - it works from anywhere because it has all the information needed. A relative path is like saying turn left at the corner - it only works if you know where you're starting from, and it works perfectly as long as the starting point is right. Relative paths for internal links, absolute for everything external - once that habit is in place you'll rarely have a broken link that wasn't also a typo