HTML File Path
In this tutorial, we will learn about working of directories in HTML, ways to locate files and other source files with the help of examples.
File Path
A file path describes the location of a file in a website folder. They are like an address of file for a web browser.
We can link any external resource to add our HTML file with the help of a file path such as a file, CSS file, JavaScript file, Images, Video, Audio, etc.
The src or href attribute requires an attribute to link any external source to an HTML file. To insert a file on a web page its source must be known.
Ways to locate File Path
| Path | Description |
|---|---|
| <img src = “picture.jpg”> | The picture.jpg file is located in the same folder |
| <img src = “images/picture.jpg”> | The picture.jpg file is located in the images folder in the currrent folder |
| <img src = “/images/picture.jpg”> | The picture.jpg file is located in the images folder at the root of the current folder |
| <img src = “../picture.jpg”> | The picture.jpg file is located in folder one level up from the current folder |
| <img src = “../../picture.jpg”> | The picture.jpg file is located in folder two level up from the current folder |
Files attached using File Path
We can attach many file format using file path in an HTML page :
- Web pages
- Images, audios and videos
- Stylesheets
- Javascript
Types of File Path
There are two types of File Paths :
- Absolute File Path
- Relative File Path
Absolute File Path
The absolute file path specifies the full address (URL) to access an internet file.
Example :
<!DOCTYPE html>
<html>
  <head>
    <title>Absolute File Path</title>
  </head>
  <body>
    <img src = "https://pixabay.com/photos/boat-lake-nature-water-
mountain-4899802/" alt = "Image not found">
  </body>
</html>Output
Relative File Path
The relative file path specifies to a file that is relative to the location of the current page.
Example :
<!DOCTYPE html>
<html>
  <head>
    <title>Relative File Path</title>
  </head>
  <body>
    <img src = "../images/Sun.jpg" alt = "Image not found">
  </body>
</html>Output
Â
In the above example, the image sun.jpg is located in the folder images which is one level up from the currrent folder.