HTML File Paths
Last Updated :
12 Mar, 2024
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:Â
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:Â
Â
Share your thoughts in the comments
Please Login to comment...