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.
Working with relative file paths has many advantages. It is useful to guarantee that the links inside your site work properly if the name of the domain changes while the folder is preserved. This also increases the mobility of the website and can be easily relocated from one server to another while in the process the links do not disintegrate.
Furthermore, use of relative paths helps one to have short and clean code, which in one way helps in the management and maintenance of the HTML documents. Organizing files in a logical manner proves beneficial for other workers, increasing the efficiency of Web development projects.
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.
Did you know we work 24x7 to provide you best tutorials
Please encourage us - write a review on Google
