HTML File Paths

HTML file paths refer to the location of files within a website’s directory structure. They specify the route from the current HTML document to other resources like images, stylesheets, or scripts, enabling browsers to correctly locate and load these assets.

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 the current directory location.

Syntax

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

Example: In this example we display 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.w3wiki.net/wp-content/uploads/geek.png" 
         alt="My Image" 
         style="width: 400px" />
</body>

</html>

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/Beginner.jpg" alt="My Image">

Example: In This example, the relative file path “images/Beginner.jpg” indicates that the image file “Beginner.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/Beginner.jpg" 
         alt="My Image" 
         style="width:400px">
</body>

</html>

Output:

Tags:

#HTML-Basics #HTML #Web Technologies

HTML Iframes

HTML Layout