HTML File Paths

HTML File Paths

22 Jul 2023
Beginner
1.74K Views
7 min read
Learn with an interactive course and practical hands-on labs

HTML Free Course

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.

Take our Html skill challenge to evaluate yourself!

In less than 5 minutes, with our skill challenge, you can identify your knowledge gaps and strengths in a given skill.

GET FREE CHALLENGE

Share Article
About Author
Sakshi Dhameja (Author and Mentor)

She is passionate about different technologies like JavaScript, React, HTML, CSS, Node.js etc. and likes to share knowledge with the developer community. She holds strong learning skills in keeping herself updated with the changing technologies in her area as well as other technologies like Core Java, Python and Cloud.

Accept cookies & close this