HTML File Path

The HTML file paths are the route to link one file to another. That we can easily access website files. And sometimes it is used to linking external resources.

The src attribute and the href attribute contain the HTML file path. Here we explain file path types and how to write file paths.

File paths are used when linking files, like:

1. Web pages
2. Images
3. Style sheets
4. JavaScripts

File path Types

In HTML there are two types of file paths. One contains the full URL structure of a file it will work only on the server-side. And other types only contain the folder structure. This is the best way to linking external files because it works locally.

1. Absolute file path
2. Relative file path

Absolute File path

The absolute file path contains the full URL address of the file. The absolute file path works only on the server.

<img src="https://www.domain.com/smiley.jpg">

Relative File path

The relative file paths contain only the folder structure of the file. It completely works on your local computer/same domain only.

Here you can see the four types of examples on relative file paths:

1. when the file located in the same folder as the current page.
2. when the file located one level down folder from the current page.
3. when the file located one level up the folder from the current page and
4. when the file process is working from the root.

Here is an example of the relative file paths.

Located in the same folder

When the file is located in the same folder of the current page then the relative file path writes in this process.

<img src="smiley.jpg">

OR

<img src="./smiley.jpg">

Located in the one level down folder

When the file is located in the one-level down folder from the current page then the relative file path write in this process.

<img src="image/smiley.jpg">

Located in the two-level down folder

When the file is located in the two-level down folder then the file path writes in this process.

<img src="demo/image/smiley.jpg">

Located in the one level up folder

When the file is located in the one level up folder then the file path write in this process.

<img src="../smiley.jpg">

Located in the two-level up folder

When the file is located in the two-level up folder then the file path writes in this process.

<img src="../../smiley.jpg">

Located in the one-level up and another one level down folder

When the file is located in the two-level up and another one level down folder then the file path writes in this process.

<img src="../image/smiley.jpg">

Working From The Root

When the file is two or more levels up to location from the current page. Then here is a short process, working from the root directory. This HTML file path sends the browser to the root directory of the web page. And then the browser will find the particular file.

<img src="/smiley.jpg">

**Note:**The Windows file system tends to use backslashes, not forward slashes, e.g. C:\\windows.

Note: On Windows computers, you might have trouble seeing the file names, because Windows has an option called Hide extensions for known file types turned on by default.