Follow The New Tutorial updates on WhatsApp, Telegram or YouTube.

HTML File Paths – Absolute and Relative

A file path specifies the location of a file inside a web folder structure. File paths are like an address of file for a web browser.

File paths are used on webpages to link external files like: Web pages, Images, Videos, Style sheets, JavaScript, CSS etc. To insert a file in a web page its source must be known.

File Path Examples

  • <img src=”myPicture.jpg”> It specifies that myPicture.jpg is located in the same folder as the current page.
  • <img src=”images/myPicture.jpg”> It specifies that myPicture.jpg is located in the images folder in the current folder.
  • <img src=”/images/myPicture.jpg”> It specifies that myPicture.jpg is located in the images folder at the root of the current web.
  • <img src=”../myPicture.jpg”> It specifies that myPicture.jpg is located in the folder one level up from the current folder.

Types of File Paths

  1. Absolute File Paths
  2. Relative File Paths

Absolute File Paths

Absolute file path specifies full URL address.

Example

<img src="https://eywiah.com/wp-content/uploads/2021/12/image-65.png">

Relative File Paths

The relative file path specifies to a file which is related to the location of current page.

Examples

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

<img src="/images/nature-2.jpg">  

In below example file path points to a file in the images folder located in the current folder.

<img src="images/nature-3.jpg">  
  • /" means the root of the current drive.
  • ./” means the current directory.
  • "../" means the parent of the current directory.
  • “../../” = Two directories back.

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="Mountain">

You should use relative file paths, so that your code will be independent of URL.