HTML | File Paths

A file path specifies the location of a file inside a web folder structure. Its like an address of a file which helps the web browser to access the files. File paths are used to link external resources such as images, videos, style sheets, JavaScript, displaying other web pages etc.

To insert a file in a web page its source must be known. For example, the syntax (<img src=” ” alt=” “>) is used to insert an image file, where the path of the file is mentioned in the source (src).
File paths are of two types:

  • Absolute File Paths
  • Relative File Paths

Absolute File Paths: It describes the full address(URL) to access an internet file.



<img src=”https://media.geeksforgeeks.org/wp-content/uploads/geek.png” alt=”My Image”>

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>Absolute file path</title>
    </head>
    <body>
        alt="My Image" style="width:400px">
    </body>
</html>                    

chevron_right


Output:

Relative File Path: It describes the path of the file relative to the location of the current web page file.
Example 1: It shows the path of the file present in the same folder of the current web page file.

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 the same folder</h2>
        <img src="images/geeks.jpg" alt="My Image" style="width:400px">
    </body>
</html>                    

chevron_right


Output:
relative file path

Example 2: 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 sub folder, 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/geeks.jpg" alt="My Image" style="width:400px">
    </body>
</html>                    

chevron_right


Output:
relative file path

Example 3: It shows the path of the file present in a folder which is located at the root of the current sub directories.

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:400px">
    </body>
</html>                    

chevron_right


Output:
relative file path



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.



Improved By : Akanksha_Rai



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.