HTML File Path is used to describe the location of a file in a websites folder.
HTML File Path is very important section. Without proper understanding of HTML File Path it is very difficult to work with large applications. In this topic we will understand what is HTML File Path and, how many type are path and how we can write HTML File Path in best way. So let’s start.
Type of File Used in HTML
There are many types of files are used in HTML, below we are listing few of them which uses most frequently.
- Web Pages: HTML Web Page File - .html
- Style Sheets: CSS File - .css
- JavaScript: JavaScript File - .js
- Image: Image File - .jpg,.png,..
- Jquery: Jquery File - .js
File paths are used on webpages to link external files like
Types of HTML File Path
File path means location of a file in project directory. In HTML File Path system we can define file path in 2 way:
- Absolute HTML File Path
- Relative HTML File Path
Absolute File Paths
An absolute file path is the full URL to an internet file including domain name, means eject location on server, see below example.
<!DOCTYPE html>
<html>
<body>
<img src="https://www.gdatamart.com/img/pic.jpg" />
</body>
</html>
Relative File Paths
A relative file path points to a file relative to the current page. In this example, the file path points to a file in the img folder located at the root of the current web
<!DOCTYPE html>
<html>
<body>
<img src="../img/pic.jpg" />
</body>
</html>
There are three condition for a file location
- File can be in same folder for which we are looking for
- File can be in upperside folder:
- 1 level up,
- 2 level up, ....
- file can be innerside folder:
- 1 level in,
- 2 level in, ....
Same Level
If both file are at same level means in same folder then we can directly pass the name of file.
UP Level
As we know the file for which we are looking for can be, 1,2,3.. level up diection, in such case we use
- 1-level: path ../folder_name/file_name
- 2-level: path ../../folder_name/file_name
Note: the ../ is used for one level up, if ther are 5 level up then we have to use ../ 5-times
Down Level
If file for which we are looking lies in 1,2,3.. step in down folder then the path will be
- 1-level down: path folder_name/file_name
- 2-level: path folder_name1/folder_name2/file_name
Attribute & Description
| Attribute |
Attribute & Description |
| <img src="pic.jpg"> |
It specifies that pic.jpg is located in the same folder as the current page. |
| <img src="img/pic.jpg"> |
It specifies that pic.jpg is located in the img folder in the current folder. |
| <img src="/img/pic.jpg"> |
It specifies that pic.jpg is located in the img folder at the root of the current web. |
| <img src="../pic.jpg"> |
It specifies that pic.jpg is located in the folder one level up from the current folder. |
As a Developer
As a developer always try to write relative file path, it is good practice to write it because just imagine a condition, for some reason if you are changing you domain the you do not need to warry about file path, otherwise you needs to change all.