Open In App

HTML File Paths

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

HTML file paths specify the location of HTML files within a directory structure. They can be absolute (starting from the root directory) or relative (starting from the current directory), facilitating file organization and linking.

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). 

Examples of File Path

Path

Descriptions

<img src=”…/gfg_img.png”>

When the file is located in the folder that is one level up from the current directory.

<img src=”/pics/gfg_img.png”>

When the files are in the folder & it is located at the root of the current directory.

<img src=”pics/gfg_img.png”>

The files are located inside the folder in the current working directory.

<img src=”gfg_img.png”>

When the files are located in the current working directory.

HTML File Paths Examples

File paths are of two types: 

  • Absolute File Paths
  • Relative File Paths

Absolute File Paths

Absolute file paths specify the complete location of a file in a system, starting from the root directory. They include the full directory path, ensuring precise file identification regardless of current directory location.

Syntax

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

Example: In this example we displays an image with an absolute file path using the <img> tag, specifying the image source (src) and alternative text (alt). The image’s width is set to 400 pixels.

html
<!DOCTYPE html>
<html>
    <head>
        <title>Absolute file path</title>
    </head>
    <body>
        <img
            src=
"https://media.geeksforgeeks.org/wp-content/uploads/geek.png"
            alt="My Image"
            style="width: 400px"
        />
    </body>
</html>

Output: 

Absolute File Paths example output

Relative File Path

A relative file path in HTML refers to the location of a file relative to the current web page’s location.

Syntax

<img src="/images/geeks.jpg" alt="My Image">

Example : In This example the relative file path “images/geeks.jpg” indicates that the image file “geeks.jpg” is located in a subfolder named “images” relative to the current HTML 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 output

Last Updated : 12 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads