Open In App
Related Articles

HTML File Paths

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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: 

html

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

                    

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. 
 

html

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

                    

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: 
 

html

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

                    

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. 
 

html

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

                    

Output: 
 

relative file path

Supported Browser:

  • Google Chrome
  • Microsoft Edge
  • Firefox
  • Opera
  • Safari
     

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
 



Last Updated : 21 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads