HTML File Paths
In this artical, we will learn about HTML file paths in depth with the help of examples. An HTML file path is the address of a specific file. HTML File paths are used to link external files like javascript, CSS, images, and other webpages in the HTML document.
For example,
<a href="path/to/file.html">Link to file</a>
In the above example, path/to/file.html is the file path to the HTML file. This file path is connected to the current HTML document.
Types of HTML File Paths
- Absolute File Path
- Relative File Path
Absolute file path
The absolute file path is a full URL (address) of the file path to access an internet file.
For example,
<img src="https://yt3.googleusercontent.com/rLIgmFWSFN8_0whhwznmrpGzsmTxzaJeiKCvU8qkaAliC-_0Ze0kn1Fry--BYXCLBtsyKGlZ9Q=s900-c-k-c0x00ffffff-no-rj" width="200" />
In the above example, it is given the complete location of the website
Relative File Path
The relative file path describes the path of the file relative to the location of the current web page.
For example,
<!DOCTYPE html>
<html>
<head>
<title>Relative file path</title>
</head>
<body>
<h2>File present in the same folder</h2>
<img src="https://yt3.googleusercontent.com/rLIgmFWSFN8_0whhwznmrpGzsmTxzaJeiKCvU8qkaAliC-_0Ze0kn1Fry--BYXCLBtsyKGlZ9Q=s900-c-k-c0x00ffffff-no-rj"" style="width:400px">
</body>
</html>
Output:
File Path
In the above example, . We are able to access the images folder because the images directory is located in the same folder as our HTML file (index.html).
Access File Located Inside The Root Directory
Now, let's see how we access the folder that is present in the root directory. The root directory is the topmost directory that contains all related files and folders.
Example
<!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="https://yt3.googleusercontent.com/rLIgmFWSFN8_0whhwznmrpGzsmTxzaJeiKCvU8qkaAliC-_0Ze0kn1Fry--BYXCLBtsyKGlZ9Q=s900-c-k-c0x00ffffff-no-rj" alt="My Image" style="width:400px">
</body>
</html>
Output:
File located one level up
Now, let's see how we access the folder that is located one level up.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Relative file path</title>
</head>
<body>
<h2>File present in a folder above the current folder</h2>
<img src=".https://yt3.googleusercontent.com/rLIgmFWSFN8_0whhwznmrpGzsmTxzaJeiKCvU8qkaAliC-_0Ze0kn1Fry--BYXCLBtsyKGlZ9Q=s900-c-k-c0x00ffffff-no-rj" alt="My Image" style="width:400px">
</body>
</html>
Summary
Take our free skill tests to evaluate your skill!
In less than 5 minutes, with our skill test, you can identify your knowledge gaps and strengths.
Previous Tutorial
