The location of a file in a website folder is specified or described by the HTML File Path. It is especially required to link to an external file. An external file can either be a Web page, an Image, a Style sheet, or a JavaScript file.
| Path | Description |
| <img src=”img.jpg”> | When the required file (img.jpg in this case) is located in the same folder as the current page. |
| <img src=”images/img.jpg”> | When the required file (img.jpg in this case) is located in the images folder in the current folder. |
| <img src=”/images/img.jpg”> | When the required file (img.jpg in this case) is located in the images folder at the root of the current web. |
| <img src=”../img.jpg”> | When the required file (img.jpg in this case) is located in the folder one level up from the current folder. |
Types of HTML File Paths:
Absolute File Path:
An absolute file path is the full URL address of a file.
Example:
<!DOCTYPE html> <html> <body> <h2>Absolute File Path Example:</h2> <img src="https://www.w3schools.blog/wp-content/uploads/2014/08/java-plateform-independant-1.jpg" alt="Java" style="width:400px"> </body> </html>
Explanation: In the above example, we are using the full URL address of the file.
Relative File Path:
A relative file path is the address of a file relative to the current page.
Example 1:
<!DOCTYPE html> <html> <body> <h2>Relative File Path</h2> <img src="/images/img.jpg" alt="Sky" style="width:300px"> </body> </html>
Explanation:
In the above example, we are using a relative file path when the required file is located in the images folder at the root of the current web.
Example 2:
<!DOCTYPE html> <html> <body> <h2>Relative File Path</h2> <img src="images/img.jpg" alt="Sky" style="width:300px"> </body> </html>
Explanation: In the above example, we are using a relative file path when the required file is located in the images folder in the current folder.
Example 3:
<!DOCTYPE html> <html> <body> <h2>Relative File Path</h2> <img src="../images/img.jpg" alt="Sky" style="width:300px"> </body> </html>
Explanation:
In the above example, we are using a relative file path when the required file is located in the folder one level up from the current folder.
