HTML File Path

by

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.