How to link back out of a folder using the a-href tag?

Introduction:

Whenever we make a project it is generally distributed among various folders. That is generally done to improve the connectivity and readability for the various web developers working on the same project. For example:

The above classification is just an example but the classification can be bigger. So if you have to call an image from the image folder for the home page or want to call a page in article form the home page it would be a direct URL ie. “Images/gfg.jpg” or “Other Pages/Articles/Gfg Article1.html“. But if you have to call an image from the image folder for the Gfg Article1 page then the general URL will not work. You have to use a relative file path.

To learn more about the relative path please follow this article.



Example 1:

It shows the path of the file present in a folder above the folder of the current web page file. The image file present in a folder called images and current web page file exists inside a subfolder, then the code will be as follows:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    <head
        <title>Relative file path</title
    </head
    <body
        <h2>File present in a folder above the current folder</h2
        <img src="../images/gfg.jpg" alt="My Image" style="width:200px"
    </body
</html>

chevron_right


Output:

Example 2:

It shows the path of the file present in a folder which is located at the root of the current subdirectories.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    <head
        <title>Relative file path</title
    </head
    <body
        <h2>File present in a folder which is located at<br
        the root of the current subdirectories</h2
        <img src="/images/picture.jpg" alt="My Image" style="width:200px"
    </body
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.