Author: Michal Szymanski
HTML File Paths
A file path describes the location of a file in a web site's folder structure.
File paths are used when linking to external files like:
- Web pages
- Images
- Style sheets
- JavaScripts
Examples:
| Path | Description |
|---|---|
| <img src="picture.jpg"> | picture.jpg is located in the same folder as the current page |
| <img src="images/picture.jpg"> | picture.jpg is located in the images folder in the current folder |
| <img src="/images/picture.jpg"> | picture.jpg is located in the images folder at the root of the current web |
| <img src="../picture.jpg"> | picture.jpg is located in the folder one level up from the current folder |
Absolute File Paths
An absolute file path is the full URL to an internet file:
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo">
Relative File Paths
A relative file path points to a file relative to the current page.
In this example, the file path points to a file in the images folder located at the root of the current web:
<img src="/images/mdb192x192.jpg" alt="MDB Logo">
In this example, the file path points to a file in the images folder located in the current folder:
<img src="images/mdb192x192.jpg" alt="MDB Logo">
In this example, the file path points to a file in the images folder located in the folder one level above the current folder:
<img src="../images/mdb192x192.jpg" alt="MDB Logo">
Previous lesson Next lesson
Spread the word:
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, web developer, UI/UX designer, marketing analyst. Dancer and nerd in one.Note: We can help you build your project.
learn more