HTML File Paths

A file path describes the location of a file in a website’s folder structure. It provides a file address that helps web browser to access that particular file.

The file paths are used to link a webpage to the external files, such as web pages, images, style sheets, and JavaScript.

<img src="good_morning.jpg;">
This example shows that a file is located in the same folder as the existing page.

<img src="images/good_morning.jpg;">
This example shows that a file is located in the images folder in the existing folder.

<img src="/images/good_morning.jpg;">
This example shows that a file is located in the images folder at the root of the existing web.

<img src="../good_morning.jpg;">
This example shows that a file is located in the folder which is one level up from the current folder.

<img src="../../good_morning.jpg;">
This example shows that a file is located in the folder which is two levels up from the current folder.

File Paths are of two types:

⦁ Absolute File Paths
⦁ Relative File Paths

Absolute File Paths

It contains the complete URL to an internet file.

Example:

<img src="https://www.xyz.com/images/good_morning.jpg;" src="Have a positive and wonderful day">

Relative File Paths

It contains a file relative to the existing page.
All of them are examples of relative file paths.

Example:

<img src="/images/good_morning.jpg" src="Have a positive and wonderful day">
<img src="images/good_morning.jpg" src="Have a positive and wonderful day">
<img src="../good_morning.jpg" src="Have a positive and wonderful day">

It is always recommended to use relative file paths, if possible.

It is so because when you use relative file paths, the web pages will not be limited to the existing base URL. All links will easily work on your computer as well as on the existing and future public domains.