HTML File Paths
File paths tell the browser where to find images, stylesheets, scripts, and links. There are three flavours: absolute URLs, root-relative paths, and document-relative paths.
Path styles
| Style | Looks like | Where it points |
|---|---|---|
| Absolute URL | https://example.com/img/logo.png | The exact location, on any site. |
| Root-relative | /img/logo.png | Starts at the site root regardless of where the current page lives. |
| Document-relative | img/logo.png | Relative to the current page's folder. |
| Parent | ../img/logo.png | Go up one folder, then into img/. |
| Current | ./img/logo.png | Same as img/logo.png — explicit "current folder". |
Worked example
If your page is /blog/posts/index.html and you want to reference /img/logo.png:
- Absolute:
https://yoursite.com/img/logo.png - Root-relative:
/img/logo.png(recommended) - Document-relative:
../../img/logo.png
Tip: Prefer root-relative paths for in-site assets. They keep working when you move a page to a different folder.
Example
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML File Paths</title>
</head>
<body>
<h1>HTML File Paths</h1>
<p>This is a demo page for the "HTML File Paths" lesson.</p>
</body>
</html>
Try it Yourself »
Exercise
Reference an image one folder above the current file.
<img src="
/logo.png" alt="Logo">
Two dots mean "parent directory".
Discussion
Loading…