HTML File Paths

A file path defines the location of a file in a web site's folder structure.

A file path is used when we link to such external files like:


There exist absolute and relative file paths.

Absolute File Paths

An absolute file path is the URL to access an internet file.

Example of an absolute file path:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Absolute File Path Example</h2>
    <img src="https://www.slrlounge.com/wp-content/uploads/2019/11/Sea-Thru-Underwater-Photography-Algorithm-SLR-Lounge_0001-1000x675.jpg" alt="Sea" style="width:300px">
  </body>
</html>

Relative File Paths

A relative file path mentions a file that is relative to the current page. In the example below, the file path points out a file in the images folder that is located at the root of the current web:

Example of a relative file path:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Relative File Path Example</h2>
    <img src="/build/images/smile-small.jpg" alt="Smile" width="290" height="260">
  </body>
</html>

Practice Your Knowledge

What are the types of file paths in HTML?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?