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.
<!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.
<!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:
Contact Us