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
<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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html>
<body>
<h2>Relative File Path</h2>
<img src="/images/img.jpg" alt="Sky" style="width:300px">
</body>
</html>
<!DOCTYPE html> <html> <body> <h2>Relative File Path</h2> <img src="/images/img.jpg" alt="Sky" style="width:300px"> </body> </html>
<!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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html>
<body>
<h2>Relative File Path</h2>
<img src="images/img.jpg" alt="Sky" style="width:300px">
</body>
</html>
<!DOCTYPE html> <html> <body> <h2>Relative File Path</h2> <img src="images/img.jpg" alt="Sky" style="width:300px"> </body> </html>
<!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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html>
<body>
<h2>Relative File Path</h2>
<img src="../images/img.jpg" alt="Sky" style="width:300px">
</body>
</html>
<!DOCTYPE html> <html> <body> <h2>Relative File Path</h2> <img src="../images/img.jpg" alt="Sky" style="width:300px"> </body> </html>
<!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.