HTML File Paths
In this page:
<img src="folder/file.ext">
<img src="/folder/file.ext">
<img src="../file.ext">
<img src="https://domain.com/file.ext">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.
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.
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.
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.
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.
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.
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: