File Path in HTML

File Paths are the location of the files present on the website folder, It is used to connect external resources with HTML documents. Let us understand the HTML File Path in detail.

HTML File Path

HTML File Paths are used to describes the address of the file on the web browser with the required file extensions. It is used to link the external resource such as images, videos, Javascript, CSS, webpages, Docs, etc in the HTML document with the help of HTML Attributes.

  • The HTML src or href attribute requires an element to link any external source to an HTML file on the webpage.
  • There are mainly two types of file types Absolute file path and Relative file path to add in the HTML document.

Syntax

<img src=” ” alt=”“>

<img tag is the example of the source Attribute used to insert the path of the file on the document from the file location.

<img src=”photo.jpg” alt=” my picture “> It defines that photo is located in the same folder as the current of the webpage.

<img src=”images/photo.jpg” alt=” my picture “> It defines that photo is located in the images folder in the current folder of the webpage.

<img src=”/images/photo.jpg” alt=” my picture “> It defines that photo is located in the images folder at the root of the current webpage.

<img src=”../photo.jpg” alt=” my picture “> It defines that photo is located in the folder one level up from the current folder on the webpage.

Types of HTML File Paths

1. Absolute File Path

The absolute File path specifies the full address that is the URL to access the file from the location.

<img src=”https://codedec.com/wp-content/uploads/2020/08/h-300×64.png” alt=”CODEDEC LOGO ”>

Example: illustration of Absolute File Path in an online server.

<!DOCTYPE html>
<html>
<body>

<h2>Using a Full URL File Path</h2>
<img src="https://codedec.com/wp-content/uploads/2020/08/sd-300x173.png" alt="codedec homepage" style="width:300px">

</body>
</html>

OUTPUT:

2. Relative File Path

Relative File Path specifies the required path of the file relative to the location of the current webpage, it works on the localhost as well as in the website domain.

Example: illustration of Relative File path in the images folder located at the root of the current webpage:

<!DOCTYPE html>
<html>
<body>

<h2>Exmaple of Relative File Path</h2>
<img src="/aman/codebunlogo.png" alt="codebunlogo" style="width:300px">

</body>
</html>

OUTPUT:

Example: illustration of Relative File path in the images folder located in the same current webpage.

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Example ofRelative file path</title> 
  </head> 
  <body> 
    <h2>File  in the same folder as the current web</h2> 
    <img src="aman/codedeclogo.png" alt="codedec logo" style="width:400px"> 
  </body> 
</html>

OUTPUT:

Example: illustration of Relative File path in the image folder one level up from the current webpage.

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Example of Relative file path</title> 
  </head> 
  <body> 
    <h2>File one level up of the folder on current web</h2> 
    <img src="../aman/relativefilepath3.png" alt="html introduction image" style="width:400px"> 
  </body> 
</html>

OUTPUT: