How to apply File Paths in HTML?

By | June 10, 2022

A file path describes the location of a file in a web site’s folder structure.

File Path Examples

PathDescription
<img src=”picture.jpg”>The “picture.jpg” file is located in the same folder as the current page
<img src=”images/picture.jpg”>The “picture.jpg” file is located in the images folder in the current folder
<img src=”/images/picture.jpg”>The “picture.jpg” file is located in the images folder at the root of the current web
<img src=”../picture.jpg”>The “picture.jpg” file is located in the folder one level up from the current folder

HTML File Paths

A file path describes the location of a file in a web site’s folder structure.

File paths are used when linking to external files, like:

  • Web pages
  • Images
  • Style sheets
  • JavaScripts

Absolute File Paths

An absolute file path is the full URL to a file:

<!DOCTYPE html>
<html>
<body>
<h2>Using a Full URL File Path</h2>
<img src="https://www.help.rerfindia.org/images/picture.jpg" alt="Mountain" style="width:300px"></body>
</html>

Using a Full URL File Path

Mountain

Relative File Paths

A relative file path points to a file relative to the current page.

In the following example, the file path points to a file in the images folder located at the root of the current web:

Example

<!DOCTYPE html>
<html>
<body>
<h2>Using a Relative File Path</h2>
<img src="/images/picture.jpg" alt="Mountain" style="width:300px">
</body>
</html>​

Using a Relative File Path

Mountain

In the following example, the file path points to a file in the images folder located in the current folder:

Example

<!DOCTYPE html>
<html>
<body>
<h2>Using a Relative File Path</h2>
<img src="images/picture.jpg" alt="Mountain" style="width:300px">
</body>
</html>

Using a Relative File Path

Mountain

In the following example, the file path points to a file in the images folder located in the folder one level up from the current folder:

Example

<!DOCTYPE html>
<html>
<body>
<h2>Using a Relative File Path</h2>
<img src="../images/picture.jpg" alt="Mountain" style="width:300px">
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<h2>Using a Relative File Path</h2>
<img src="images/picture.jpg" alt="Mountain" style="width:300px">
</body>
</html>​

Using a Relative File Path

Mountain

Using a Relative File Path

Mountain

Leave a Reply

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