HTML Basics
HTML File Paths
A file path tells the browser where to find a resource such as an image, stylesheet, or another page. Getting paths right is essential to avoid broken links.
Absolute vs Relative Paths
- Absolute path: the complete address, e.g. https://example.com/images/logo.png.
- Relative path: a location relative to the current file, e.g. images/logo.png.
Relative Path Examples
| Path | Meaning |
|---|---|
| logo.png | A file in the same folder as the current page |
| images/logo.png | A file inside the images subfolder |
| /images/logo.png | A file starting from the site root |
| ../logo.png | A file one folder up (the parent folder) |
| ../../logo.png | Two folders up |
<!-- Same folder -->
<img src="photo.jpg" alt="Photo">
<!-- In a subfolder -->
<img src="assets/photo.jpg" alt="Photo">
<!-- One folder up -->
<img src="../photo.jpg" alt="Photo">💡
Prefer relative paths for files within your own project so the site works no matter where it is hosted. Use absolute paths for external resources on other websites.