HTML File Paths

Ekansh Saxena
Last Updated: May 13, 2022

Introduction

Let’s discuss File Paths in HTML, how to add them in our HTML file, and their importance in our HTML document. 

File Paths play a crucial role in linking various other files/documents together, hence helping us modularize our entire work (e.g., to create a website) into different files and folders. This even helps in ease of understanding our code for other users. 

This also helps in enhancing the UI of the webpage.

File paths describe the location of various files in a website’s folder structure.

Application

It is used to link various external files like :

  1. Other HTML web pages

Example:

Output:

 

  1. Images

Example:

Output:

 

  1. Style Sheets / CSS document files

Example:

NOTE: CSS files are linked via mentioning their file paths in the link tag.

 

  1. JavaScript files

Example:

NOTE: JavaScript files are linked via mentioning their file paths in the script tag.

 

  1. Video Tags

Example:

And many more.

Output:

 

Different types of File Paths

  1. We use the path - “codingninjas.jpg” when the codingninjas.jpg file is located inside the same folder as the current html file. 
<img src = “codingninjas.jpg”>

 

where codingninjas.jpg is the file name.

Output:

 

  1. We use the path - “images/codingninjas.jpg” when codingninjas.jpg file is located inside the images folder which is inside the same folder as the current page. 
<img src = “images/codingninjas.jpg”>

 

where  images are the folder name

codingninjas.jpg is the file name.

Output:

 

  1. We use the path - “/images/codingninjas.jpg” when codingninjas.jpg file is located inside the images folder which is present at the root directory of the current page. 
<img src = “/images/codingninjas.jpg”>

where  images are the folder name

codingninjas.jpg is the file name.

 

Output:

 

  1. We use the path - “../codingninjas.jpg” when codingninjas.jpg file is located outside the folder in which the current page is present. 
<img src = “../codingninjas.jpg”>

 

where codingninjas.jpg is the file name.
 

Output:

 

Two Categories of File Paths
 

  1. Absolute File Paths

It is the full URL of the linked file. 
 

  1. Relative File Paths

It refers to the file relative to the current page.
 

Example:

<!DOCTYPE html>

<html>

<body>

 

<h4>Absolute File Path</h4>

<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">

 

<h4>Relative File Path</h4>

<img src="/images/picture.jpg" alt="Mountain" style="width:300px">

 

</body>

</html>

 

Output:

 

Using relative file paths is the best practice for our HTML document.

This helps our web pages to make them independent of the current base URL. As a result, all the links will work on our computer(localhost) or any hosting public domain. 

Frequently Asked Questions-

  • What is the UI of a website?

    Ans. The user interface (UI) is the “surface” of any application or website, representing the software's entire visual makeup.

  • What is HTML?

    Ans: HTML(HyperText Markup Language) is the standard markup language for creating Web pages. It describes the structure of a Web page.  

  • What are HTML File Paths?

     Ans. File paths describe the location of various files in a website’s folder structure.

 

Key Takeaways-

In this blog, we learned about File Paths in HTML.

  • File paths describe the location of various files in a website’s folder structure.
  • It helps in modularizing our code, making it easy for other users to understand our code.
  • We have two types of file paths - absolute and relative file paths.
  • Using relative file paths is the best practice for our HTML document as this helps our web pages to make them independent of the current base URL. As a result, all the links will work on our computer(localhost) or any hosting public domain. 


So, File Paths in HTML is extremely easy and vital in enhancing the website's appearance.

Check out more blogs on various concepts on HTML like Style Attribute in HTMLBlock and Inline elements in HTML to read more about these topics in detail. And if you liked this blog, share it with your friends!

Was this article helpful ?
0 upvotes