HTML File Path

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 When the required file (img.jpg in this case) is located in the same folder as the current page. When the required file (img.jpg in this case) is located in the images folder in the current folder. When the required file (img.jpg in this case) is located in the images folder at the root of the current web. 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.w3spoint.com/wp-content/uploads/2014/08/java-plateform-independant-1.jpg" alt="Java" style="width:400px"> </body> </html>

Output:

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>

Output:

Explanation:

In the above example, we are using 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>

Output:

Explanation:
In the above example, we are using 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>

Output:

Explanation:

In the above example, we are using relative file path when the required file is located in the folder one level up from the current folder.