HTML File Paths

In an HTML document, we spent quite a lot of time referencing other files. Some of the examples are:

• To display an image
• Loading a CSS file
• Link to a different page

File Path is a concept which is used in HTML to describe the location of a file. File Path works as an address of a file to be referred to by the browser. By this method, HTML can detect paths of files like images, Webpages, Script files, etc.

File Path uses one of two attributes namely src or href to attach an external file with our HTML document.

Below is a list of some paths with their description:

<img src="sunset.jpg">

It indicates that we are going to use "sunset.jpg" from the same folder as the current page.

<img src="images/sunset.jpg">

It indicates that "sunset.jpg" is stored in the images folder in the same website folder.

<img src="/images/sunset.jpg">

It indicates that our image is stored in the images folder at the root where the current web folder is located.

<img src="../sunset.jpg">

It indicates that the given image is stored exactly one level up from the current folder of the website.

Absolute File Paths

An Absolute File Path is the complete URL to an element on your website.

Example:

<img src="https://websitesiq.com/tutorials/html-tutorials/images/sunset.jpg" alt="Image of Something">

Relative File Paths

A Relative File Path points to an element, relative to the current page.

Example:

<img src="/images/sunset.jpg" alt="Photo of Something">

Absolute or Relative... which path to choose!

To sum up, if you want to link some content on your website, use the relative path and if you are linking to an external website then it is best to use the absolute path.