HTML File Path

In this HTML tutorial, you will learn all that is meant by file Path in HTML. We will also discuss various types of file paths specified in HTML.

What is meant by File Path in HTML?

The location of a file in a website folder is described using an HTML file path. For a web browser, file paths are similar to file addresses. With the use of file paths, we may add any external resource to our HTML file, such as photos, files, CSS files, JS files, videos, and so on. To link any external source to an HTML file, the src or href property requires an attribute.

In various ways, we can specify the file path

Path Description

<img src="demo.jpg">

It is used when the file is located in the same folder where the document is stored

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

It is used when the file is located in the same folder of the document but in the sub-folder named image

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

It is used when the file is located in the sub-folder image of root folder of the document 

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

It is used when the file is located in the one level up folder

 

The file pat is used to link the external files such as Web pages, Images, Style sheets, and JavaScript

There are mainly two types of File Paths:

  1. Absolute File Path
  2. Relative File Path

Absolute File Path

The complete URL address is specified by the absolute file path.


<img src=" https://www.learnetutorials.com/logo.png" alt="logo">
 

Relative File Path

The relative file path refers to a file that is connected to the current page's position. Example: When the file is located in the same folder of the document but in the sub-folder named image


<img src=" images/demo.jpg " alt="logo"> 

Example: When the file is located in the sub-folder image of the root folder of the


<img src=" images/demo.jpg " alt="logo"> 

Example: When the file is located in the one level up folder


<img src="../demo.jpg " alt="logo"> 

Note: We should always use the correct URL, file name, and picture name; otherwise, the page will not appear. Whenever possible, we should utilise relative file paths so that your code is not dependent on the URL.