HTML File Paths – Absolute and Relative File Paths

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

Keeping you updated with latest technology trends, Join DataFlair on Telegram

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-

html absolute file path

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-

relative path in html

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-

Images folder in the current folder itself

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-

Folder at the root of the web-site folder

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-

Images folder one level up the current web-page’s folder

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.