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 :
Other HTML web pages
Example:
Output:
Images
Example:
Output:
Style Sheets / CSS document files
Example:
NOTE: CSS files are linked via mentioning their file paths in the link tag.
JavaScript files
Example:
NOTE: JavaScript files are linked via mentioning their file paths in the script tag.
Video Tags
Example:
And many more.
Output:
Different types of File Paths
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:
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:
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:
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
Absolute File Paths
It is the full URL of the linked file.
Relative File Paths
It refers to the file relative to the current page.
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) isthe 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.
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.
117+ registered 