HTML File Paths
In this page:
Relative Paths - Same Directory
When the HTML file and the asset you want to load are located in the exact same folder, you do not need to write any folder names or slashes. You simply reference the filename directly.
Note: Writing just the filename is the simplest relative path, keeping adjacent files perfectly coupled.
Warning: Ensure the filename spelling and extension are exactly correct, as web servers are highly case-sensitive.
Example: Relative Paths - Same Directory
<img src="photo.jpg" alt="Photo">Relative Paths - Down into Subfolders
In organized web projects, assets are typically sorted into subfolders like images or css. To target these, you write the subfolder name followed by a forward slash and the filename.
Note: Keep your root folder tidy by sorting similar assets into separate subdirectories.
Warning: Never use backslashes in your paths as they are designed for local Windows systems and will break on public web servers.
Example: Relative Paths - Down into Subfolders
<img src="images/photo.jpg" alt="Photo">Relative Paths - Up into Parent Folders
If your HTML file resides inside a nested subfolder and needs to load an asset sitting one level higher in the directory hierarchy, you use a double dot sequence (../) to instruct the browser to step out of the current folder.
Note: Each double-dot sequence steps the browser up exactly one directory level.
Warning: If you step up too many levels, the browser will lose track of your local directory structure and fail to load the file.
Example: Relative Paths - Up into Parent Folders
<img src="../images/photo.jpg" alt="Photo">Absolute File Paths
An absolute path is a complete, global web address that contains the secure domain name and protocol. It points to a static location on the internet, allowing you to load assets hosted anywhere in the world.
Note: Use absolute paths when linking to external resources that you do not host on your own server.
Warning: If the third-party server goes offline or changes its URL, your absolute path links will break instantly.
Example: Absolute File Paths
<img src="https://example.com/images/photo.jpg" alt="Photo">Why Best Practice Prefers Relative Paths
When building a website, you work on your computer locally before uploading the project to a public domain. Relative paths ensure that your links remain perfectly functional on your local hard drive and automatically transfer cleanly to the internet without modification.
Note: Develop your code using relative paths to make your entire project folder portable.
Warning: Using absolute computer paths like C:/projects/index.html will break completely the moment you upload your code to a live host.
Example: Why Best Practice Prefers Relative Paths
<link rel="stylesheet" href="css/styles.css">
<img src="images/logo.png" alt="Logo">URL vs File Path: What's the Difference
A file path describes where a file physically lives on a computer's storage, like C:/projects/site/logo.png on Windows. A URL describes where a resource can be found and requested over the internet, like https://cookiescursor.com/logo.png. When you write a relative link in HTML, the browser converts it into a full URL, not a literal file path.
Note: Think of the src or href value you write in HTML as always becoming part of a URL, even when it looks like a simple relative file path.
Warning: A path that works perfectly when opening a file directly on your own computer can break completely once uploaded to a real web server, since server folder structures rarely match a local development folder exactly.
Example: URL vs File Path: What's the Difference
<!-- File path on disk: C:/projects/site/logo.png -->
<!-- Becomes this URL in the browser: -->
<img src="logo.png" alt="Logo">- Using local Windows backslash characters in web URLs, which causes public servers to fail parsing links.
- Forgetting to add step-up sequences when referencing files located higher in your project directory.
- Writing raw computer drive locations in link tags instead of using standard web path configurations.
- Relative paths are local instructions referencing folders and files in relation to the current HTML file.
- The dot-slash and double-dot-slash syntaxes step the browser into subfolders or up into parent folders respectively.
- Absolute paths specify the entire URL address, including domain protocols, which are required for linking to external sites.
Standard absolute and relative file path structures are universally supported by all web browsers.
Chapter Quiz — Complete all 12 topics to unlock
0/12 topics done
Complete these topics first: