In HTML, a file path is the address of a file. Just as you know the address of a folder on your computer to access it, you also need to tell your browser where an image or stylesheet is stored.
Example:
<img src="images/logo.png" alt="Logo">Here,
“images/logo.png” is a file path.
Types of HTML File Paths
There are four main types of file paths in HTML:
- Absolute File Path
- Relative File Path
- Parent Directory Path
- Root Directory Path
1. Absolute File Path
Absolute path tells where the file is placed on the entire internet. The full URL of the website is written in it.
Example:
<img src="https://example.com/images/pic.jpg" alt="Example Image">The browser will load the file directly from that URL.
2. Relative File Path
Relative path tells where the file is placed in relation to the folder of your current HTML file.
Example:
<img src="images/photo.jpg" alt="Photo">Here,
the “images” folder is in the same folder where your HTML file is kept.
This is the most commonly used path.
3. Parent Directory Path (../)
If the file is placed one folder behind your HTML file, you would use ../.
Example:
<img src="../photos/pic1.jpg" alt="Picture">This tells the browser to go back one level and find the file in the “photos” folder.
4. Root Directory Path (/)
If you want to access the file from the root folder of the server, then the path starts with /.
Example:
<img src="/assets/images/logo.png" alt="Website Logo">This means that the browser will move from the root folder to the “assets” folder.
Example of File Paths in Real HTML Page
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/style.css">
<script src="js/main.js"></script>
</head>
<body>
<h2>Welcome to My Website</h2>
<img src="images/banner.jpg" alt="Banner Image">
<a href="pages/about.html">About Us</a>
</body>
</html>In this example, file paths are used for images, CSS, JS, and links.