HTML File Paths

Sakshi Dhameja  4 min read
12 May 2023
Beginner
85 Views

HTML File Paths

In this artical, we will learn about HTML file paths in depth with the help of examples. An HTML file path is the address of a specific file. HTML File paths are used to link external files like javascript, CSS, images, and other webpages in the HTML document.

For example,

<a href="path/to/file.html">Link to file</a>

In the above example, path/to/file.html is the file path to the HTML file. This file path is connected to the current HTML document.

Types of HTML File Paths

  • Absolute File Path
  • Relative File Path

Absolute file path

The absolute file path is a full URL (address) of the file path to access an internet file.

For example,

<img src="https://yt3.googleusercontent.com/rLIgmFWSFN8_0whhwznmrpGzsmTxzaJeiKCvU8qkaAliC-_0Ze0kn1Fry--BYXCLBtsyKGlZ9Q=s900-c-k-c0x00ffffff-no-rj" width="200" />

In the above example, it is given the complete location of the website

Relative File Path

The relative file path describes the path of the file relative to the location of the current web page.

For example,

<!DOCTYPE html>

<html>

 <head>

  <title>Relative file path</title>

 </head>

 <body>

  <h2>File present in the same folder</h2>

  <img src="https://yt3.googleusercontent.com/rLIgmFWSFN8_0whhwznmrpGzsmTxzaJeiKCvU8qkaAliC-_0Ze0kn1Fry--BYXCLBtsyKGlZ9Q=s900-c-k-c0x00ffffff-no-rj"" style="width:400px">

 </body>

</html>

Output:

File Path

In the above example, . We are able to access the images folder because the images directory is located in the same folder as our HTML file (index.html).

Access File Located Inside The Root Directory

Now, let's see how we access the folder that is present in the root directory. The root directory is the topmost directory that contains all related files and folders.

Example

<!DOCTYPE html>

<html>

    <head>

        <title>Relative file path</title>

    </head>

    <body>

        <h2>File present in a folder which is located at<br>

        the root of the current subdirectories</h2>

        <img src="https://yt3.googleusercontent.com/rLIgmFWSFN8_0whhwznmrpGzsmTxzaJeiKCvU8qkaAliC-_0Ze0kn1Fry--BYXCLBtsyKGlZ9Q=s900-c-k-c0x00ffffff-no-rj" alt="My Image" style="width:400px">

    </body>

</html>                 

Output:

File located one level up

Now, let's see how we access the folder that is located one level up.

Example:

<!DOCTYPE html>

<html>

    <head>

        <title>Relative file path</title>

    </head>

    <body>

        <h2>File present in a folder above the current folder</h2>

        <img src=".https://yt3.googleusercontent.com/rLIgmFWSFN8_0whhwznmrpGzsmTxzaJeiKCvU8qkaAliC-_0Ze0kn1Fry--BYXCLBtsyKGlZ9Q=s900-c-k-c0x00ffffff-no-rj" alt="My Image" style="width:400px">

    </body>

</html>                   

Summary
This article indicates that a file path is a string that specifies the location of the required file within a file system. The HTML File paths are used to reference and link to files, such as images, stylesheets, scripts, or other HTML documents, within another HTML document and there are two types of file paths which are the Absolute file path and Relative file paths. With the help of this article now you can understand the file paths better and this information will surely boost your performance as well.

Accept cookies & close this