HTML File Path

Path Description
<img src="picture.jpg"> picture.jpg is located in the same folder as the current web page
<img src="images/picture.jpg"> picture.jpg is located in the images folder of the current directory
<img src="/images/picture.jpg"> picture.jpg is located in the images folder of the current site root directory
<img src="../picture.jpg"> picture.jpg is located in the parent folder of the current folder.

HTML File Path

File paths describe the location of a file in the folder structure of a website.

File paths are used when linking external files:

  • Webpage
  • Image
  • Stylesheet
  • JavaScript

Absolute File Path

Absolute file path refers to the complete URL of an internet file:

Example

<img src="https://www.codew3c.com/images/picture.jpg" alt="flower">

The <img> tag and the src and alt attributes are explained in the HTML Images chapter.

Relative Paths

Relative paths point to files relative to the current page.

In this example, the file path points to a file in the images folder located in the root directory of the current website:

Example

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

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

Example

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

In this example, the file path points to a file in the images folder located in the parent folder of the current folder:

Example

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

Good Habit

It is a good habit to use relative paths if possible.

If you use a relative path, your web page will not be bound to the current base URL. All links can work normally on your computer (localhost) or in the future public domain.