Relative Path in HTML

We often need to add and access files stored on the system in an HTML document. If the file needed in a document is in the same folder as that in which the file for the website has been stored, rather than copying the complete file path and pasting that into the HTML document, it is a better practice to add the relative path of the file.

What Exactly is a Relative Path?

The relative path means that the files that are referred to are in the same folder as the website folder structure. So that the file becomes accessible even if only its relative folder name is specified before the name of the file, instead of adding a whole path that includes the name of all the folders and directories in which the file has been stored.

How to Add Relative Paths in HTML?

The syntax to add the relative path of a file while using HTML to format the document is simple. Add an anchor tag with a href attribute that contains the relative path (folder name and the exact file name with the extension, both starting with the slash symbol). Between the opening and closing anchor tags, add the text that should be displayed in the form of a link on the output interface.

Syntax

The relative path in HTML is added through the anchor tag with the href attribute:

Example: Adding Image by Specifying the Relative Path in HTML

Let’s discuss how to add a relative path in the HTML and how it works on the graphical interface with the help of an example:

In the above statement to add the relative path in HTML:

• There is an anchor tag with the href attribute. Inside the opening anchor tag, there is the folder name “HTML and CSS,” starting with the “/” (slash symbol).
• After that, there is the exact file name “img” with the file extension “.jpg”, the content of which will be displayed on the interface.
• And the “Link to Image” is the text that will be displayed in the form of a link clicking on, which will direct the user to the content of the “jpg” file.

This will display the following output:

Benefits of Adding Relative Path in HTML

Adding the Relative path in HTML has the following benefits:

• Adding the relative path in HTML can access the specified file directly without needing to add the whole absolute path (the path that covers all the directories in which the file is stored).
• While using the relative paths in HTML, the domain names can be changed easily, and it becomes easy to move entire directories in HTML while using the relative paths.

Conclusion

Adding relative paths in HTML is a useful way of accessing a file stored in a folder or a directory in the HTML document. All it requires is creating an anchor tag and the href attribute inside the opening tag with the name of the directory or the folder and then the name and extension of the file that is supposed to be accessed.