File Paths

HTML file paths are used to link external files such as images, stylesheets, scripts, and other HTML pages to the document.

The file path tells the browser where to find the file on the server or localhost.

There are two types of file paths in HTML:

1. Absolute file paths: An absolute file path is the complete URL of the file. These are used to link the resources that are located on a different server than the current HTML file.

For example:

<img src="https://www.example.com/images/img.png" alt="Example image">

2. Relative file paths: A relative file path is relative to the current HTML file location. These are used to link the resources that are located on the same server as the current HTML file.

There are three types of relative file paths:

• Same folder: If the file you want to link to the document is in the same folder as the current file, you can simply use the file name.

For example:

<img src="img.png">

• Subfolder: If the file you want to link to the document is in a subfolder, you need to specify the subfolder name in the path.

For example:

<img src="images/img.png">

• Parent folder: If the file you want to link to the document is located in a parent folder, you need to use ../ to indicate going up one level in the folder hierarchy.

The ../ symbol tells the browser to move one folder level up. This is useful when referencing files that are located in a parent folder relative to the current file.

For example:

<img src="../img.png">

You can also combine ../ multiple times to move up multiple levels.

For example, if your folder structure is like this:

project/
├── index.html
├── img.png
├── images/
│   └── img.png
└── assets/
    └── icons/
        └── icon.png

Then you can provide the path like this:

<img src="../../assets/icons/icon.png">