HTML File Paths – Absolute and Relative File Paths
Free Web development courses with real-time projects Start Now!!
HTML file paths are used to define the file’s location, which will be used as an external resource within the HTML document. The location of the file is specified as per the structure of the web folder. External resources such as CSS files, script files, images, multimedia, etc. can be linked to an HTML document. A website has a folder structure and the file path is to describe the location of the file within that folder structure.
HTML File Paths Types
File Paths in HTML are of two types:
1. HTML Absolute File Paths
The full URL of the file, that is to be accessed, is mentioned. For example,
Code-
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <h1>Welcome to DataFlair</h1> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png" height="200px" width="200px"> </body> </html>
Output-
2. HTML Relative File Paths
The path of the file that is relative to the current web-page’s file is specified.
a. Same folder as the current web-page file
For example, there is a folder ‘DataFlair’ that has an image ‘DataFlair.png’.
Code-
<!DOCTYPE html> <html> <head> </head> <body> <h1>Welcome to DataFlair</h1> <img src="DataFlair.png" height="200px" width="200px"> </body> </html>
Output-
b. Images folder in the current folder itself
For example, there is a folder DataFlair that has another folder ‘images’ comprising the image ‘river.jpg’.
Code-
<!DOCTYPE html> <html> <head> </head> <body> <h1>Welcome to DataFlair</h1> <img src="images/river.jpg" height="200px" width="200px"> </body> </html>
Output-
c. Folder at the root of the web-site folder
For example, The root folder (C:\ drive in this case) has a folder ‘images’ consisting of an image ‘river.jpg’.
Code-
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <h1>Welcome to DataFlair</h1> <img src="/images/river.jpg" height="200px" width="200px"> </body> </html>
Output-
d. Images folder one level up the current web-page’s folder
For example, The folder ‘DataFlair’ is located as C:\Users\abc\Desktop and there is an image ‘river.jpg’ on the Desktop. Then in order to access and insert this image on our web-page, the following code is written.
Code-
<!DOCTYPE html> <html> <head> </head> <body> <h1>Welcome to DataFlair</h1> <img src="../river.jpg" height="200px" width="200px"> </body> </html>
Output-
Note- It is recommended to use relative URL paths as compared to the absolute URL paths.
Below table depicts the above mentioned types:
| Path | Function |
| <img src=”https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png”> | Absolute URL of the image specified here. |
| <img src=”DataFlair.png” | Image in the current folder as the web-page. |
| <img src=”images/river.jpg” | Image in the images folder, same as the current folder. |
| <img src=”/images/river.jpg” | Image in the images folder, at the root of the current web-page. |
| <img src=”../river.jpg” | Image in the images folder, one level up the current folder. |
Summary
File Paths are used to add external resources to the current HTML document. These resources can be images,multimedia,script,CSS file,etc.
Your 15 seconds will encourage us to work even harder
Please share your happy experience on Google
