html

File paths in HTML | Explained

In web developement, a website folder consists of numerous files that further contain relevant data. In order to access various files in the HTML file, we have to provide a certain path relative to the HTML file that denotes the location of a particular file inside a website folder and that path is known as the HTML file path.

Moreover, these file paths are useful in adding external documents such as an image, a video, a style sheet, a JavaScript file, or other web pages into your current HTML web page.

Types of HTML file path

There are, in general, two types of HTML file paths.

  1. Absolute File Path
  2. Relative File Path

The above-mentioned file paths are explained is detail below.

1. Absolute File Path

This file path in HTML represents the full URL address of a file.

Syntax

Syntax of an absolute file path is as follows.

<img src="https://www.example.com/" alt="Image Name">

Example

<!DOCTYPE html>
<html>
<body>

<img src="https://linuxhint.com/wp-content/uploads/2019/11/Logo-final.png" alt="Logo" style="width:300px">

</body>
</html>

Output

2. Relative File Path

A relative file path denotes the address of relative file associated with the location of the current web page. There are three conditions when a relative file path can be used.

Condition 1: When the external file and the current web page file are located in the same folder.

When the file is in the same folder as the current page file.

<!DOCTYPE html>
<html>
    <body>
        <img src="nature.jpg" alt="Nature" style="width:300px">
        <p>The above image is present in the same folder as the curent web page file.</p>
    </body>
</html>

Output

The image was added successfully.

Condition 2: When the file is present in a folder that is located above the folder of the web page file.

When the file is present in a folder that is located above the folder of the web page file.

<!DOCTYPE html>
<html>
    <body>
        <img src="../image/nature.jpg" alt="Nature" style="width:300px">
        <p>The above image is present in a folder that is located above the folder of the current web page file.</p>
    </body>
</html>

Output

Condition 3: When the file is present in a folder that is placed at the root of the web file.

When the location of the folder that contains the file is at root of web file.

<!DOCTYPE html>
<html>
    <body>
        <img src="/image/nature.jpg" alt="Nature" style="width:300px">
        <p>The above image is present at the root of the current web file.</p>
   </body>
</html>

Output


Relative file paths should be given priority over the absolute file paths because using a relative file path your source code will be free of URL.

Conclusion

A file path in HTML refers to the location of the file inside a web folder that contains relevant data. These file paths are used as addresses by the web browser to extract the files. File paths are useful when adding external documents such as an image, a video, a style sheet, a JavaScript file, or other web pages into your current HTML web page. This write-up discusses HTML file paths and its types in detail along with the appropriate examples.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.