A file path describes the location of a file in a web site’s folder structure.
File Path Examples
| Path | Description |
|---|---|
| <img src=”picture.jpg”> | The “picture.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
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
Absolute File Paths
An absolute file path is the full URL to a file:
<!DOCTYPE html> <html> <body> <h2>Using a Full URL File Path</h2> <img src="https://www.help.rerfindia.org/images/picture.jpg" alt="Mountain" style="width:300px"></body> </html>
Using a Full URL File Path
Relative File Paths
A relative file path points to a file relative to the current page.
In the following example, the file path points to a file in the images folder located at the root of the current web:
Example
<!DOCTYPE html> <html> <body> <h2>Using a Relative File Path</h2> <img src="/images/picture.jpg" alt="Mountain" style="width:300px"> </body> </html>
Using a Relative File Path
In the following example, the file path points to a file in the images folder located in the current folder:
Example
<!DOCTYPE html> <html> <body> <h2>Using a Relative File Path</h2> <img src="images/picture.jpg" alt="Mountain" style="width:300px"> </body> </html>
Using a Relative File Path
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:
Example
<!DOCTYPE html> <html> <body> <h2>Using a Relative File Path</h2> <img src="../images/picture.jpg" alt="Mountain" style="width:300px"> </body> </html> <!DOCTYPE html> <html> <body> <h2>Using a Relative File Path</h2> <img src="images/picture.jpg" alt="Mountain" style="width:300px"> </body> </html>
Using a Relative File Path
Using a Relative File Path