HTML File Paths

HTML File Paths

22 Jul 2023
Beginner
1.35K Views
7 min read
Learn via Video Course & by Doing 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

Live Classes Schedule

Our learn-by-building-project method enables you to build practical/coding experience that sticks. 95% of our learners say they have confidence and remember more when they learn by building real world projects.
Generative AI For Software Developers Jul 20 SAT, SUN
Filling Fast
08:30PM to 10:30PM (IST)
Get Details
Angular Certification Course Jul 20 SAT, SUN
Filling Fast
06:00PM to 08:00PM (IST)
Get Details
Azure Master Class Jul 20 SAT, SUN
Filling Fast
03:00PM to 05:00PM (IST)
Get Details
ASP.NET Core Certification Training Jul 28 SAT, SUN
Filling Fast
07:00AM to 09:00AM (IST)
Get Details
Software Architecture and Design Training Jul 28 SAT, SUN
Filling Fast
05:30PM to 07:30PM (IST)
Get Details
.NET Solution Architect Certification Training Jul 28 SAT, SUN
Filling Fast
05:30PM to 07:30PM (IST)
Get Details
Azure Developer Certification Training Jul 28 SAT, SUN
Filling Fast
10:00AM to 12:00PM (IST)
Get Details
Advanced Full-Stack .NET Developer Certification Training Jul 28 SAT, SUN
Filling Fast
07:00AM to 09:00AM (IST)
Get Details
Data Structures and Algorithms Training with C# Jul 28 SAT, SUN
Filling Fast
08:30PM to 10:30PM (IST)
Get Details
Angular Certification Course Aug 11 SAT, SUN
Filling Fast
09:30AM to 11:30AM (IST)
Get Details
ASP.NET Core Project Aug 24 SAT, SUN
Filling Fast
07:00AM to 09:00AM (IST)
Get Details

Can't find convenient schedule? Let us know

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.

Self-paced Membership
  • 22+ Video Courses
  • 800+ Hands-On Labs
  • 400+ Quick Notes
  • 55+ Skill Tests
  • 45+ Interview Q&A Courses
  • 10+ Real-world Projects
  • Career Coaching Sessions
  • Email Support
Upto 60% OFF
Know More
Accept cookies & close this