HTML File Paths

This file path in HTML represents the full URL address of a file.

A file path in HTML refers to the location of the file inside a web folder that contains relevant data. These file paths are used as addresses by the web browser to extract the files.

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

  • Web Pages
  • Images
  • Hyperlinks
  • Style sheets
  • JavaScripts
  • Media

File Path Examples

PathDescription
<img src=”pic.jpg”>The “pic.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 Types

There are, in general, two types of HTML file paths.

  • Absolute File Paths
  • Relative File Paths

The above-mentioned file paths are explained is detail below.


Absolute File Paths

This file path in HTML represents the full URL address of a file.

Syntax:

<img src="https://www.example.com/images/pic.jpg" alt="Image Name">

Check out <img> tag is explained in the following chapater: HTML Images


Relative File Paths

A relative file path denotes the address of relative file associated with the location of the current web page.

When the location of the folder that contains the file is at root of web file.

<img src="/images/pic.jpg" alt="Books">

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

<img src="images/pic.jpg" alt="Books">

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:

<img src="../images/picture.jpg" alt="Books">

Relative file paths should be given priority over the absolute file paths because using a relative file path your source code will be free of URL.