This file path in HTML represents the full URL address of a file.
A file path in HTML refers to the location of the file inside a web folder that contains relevant data. These file paths are used as addresses by the web browser to extract the files.
File paths are used when linking to external files, like:
- Web Pages
- Images
- Hyperlinks
- Style sheets
- JavaScripts
- Media
File Path Examples
| Path | Description |
|---|---|
| <img src=”pic.jpg”> | The “pic.jpg” file is located in the same folder as the current page |
| <img src=”images/picture.jpg”> | The “picture.jpg” file is located in the images folder in the current folder |
| <img src=”/images/picture.jpg”> | The “picture.jpg” file is located in the images folder at the root of the current web |
| <img src=”../picture.jpg”> | The “picture.jpg” file is located in the folder one level up from the current folder |
HTML File Paths Types
There are, in general, two types of HTML file paths.
- Absolute File Paths
- Relative File Paths
The above-mentioned file paths are explained is detail below.
Absolute File Paths
This file path in HTML represents the full URL address of a file.
Syntax:
<img src="https://www.example.com/images/pic.jpg" alt="Image Name">
Check out <img> tag is explained in the following chapater: HTML Images
Relative File Paths
A relative file path denotes the address of relative file associated with the location of the current web page.
When the location of the folder that contains the file is at root of web file.
<img src="/images/pic.jpg" alt="Books">
In the following example, the file path points to a file in the images folder located in the current folder:
<img src="images/pic.jpg" alt="Books">
In the following example, the file path points to a file in the images folder located in the folder one level up from the current folder:
<img src="../images/picture.jpg" alt="Books">
Relative file paths should be given priority over the absolute file paths because using a relative file path your source code will be free of URL.