Understanding HTML File Paths: Absolute and Relative Path Usage

A file path is used to describe the location of a file on a web server or on the local file system of a computer.

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

There are two types of file paths in HTML:

Absolute file paths

An absolute file path specifies the full URL or file path of the resource, starting from the root of the server. It includes the protocol (http:// or https://) and the domain name of the server.

As an example:

<img src="https://example.com/images/picture.jpg" />
<link href="https://example.com/css/styles.css" rel="stylesheet" />
<script src="https://example.com/js/scripts.js"></script>

Relative file paths

A relative file path specifies the location of the resource relative to the current HTML file. It does not include the protocol or domain name.

Relative file paths can be either absolute or relative to the current directory.

There are three types of relative file paths:

• Same directory: If the file is in the same directory as the HTML file, you can use the filename directly in the path.

As an example:

<img src="picture.jpg" />
<link href="styles.css" rel="stylesheet" />
<script src="scripts.js"></script>

• Child directory: If the file is in a subdirectory of the current directory, you can use the subdirectory name in the path.

As an example:

<img src="images/picture.jpg" />
<link href="css/styles.css" rel="stylesheet" />
<script src="js/scripts.js"></script>

• Parent directory: If the file is in a parent directory of the current directory, you can use ".." to refer to the parent directory.

As an example:

<img src="../images/picture.jpg" />
<link href="../css/styles.css" rel="stylesheet" />
<script src="../js/scripts.js"></script>