HTML File Paths

22 Jul 2023

Beginner

459 Views

7 min read

Learn via Video Course & by Doing Hands-on Labs

HTML & CSS Course

Start Learning Free View All Courses

HTML File Paths

In this artical, we will learn about HTML file paths in depth with the help of examples. Understanding the complexity. of HTML file paths is essential which you can learn through HTML certification. 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. The knowledge gained from this article, combined with HTML Training, will undoubtedly boost your proficiency in working with file paths effectively.