HTML File Paths Tutorials | Absolute and Relative File Paths

Understanding HTML File Paths and How to Use Them (with Example)

In this article, I will discuss File Paths in HTML with Examples. Please read our previous article discussing JavaScript in HTML with Examples. At the end of this article, you will learn everything about HTML File Paths with Examples.

HTML File Paths

{tocify} $title={Table of Contents}

HTML File Paths: A file path describes the location of a file in a website's folder structure.

With the help of file paths, we can add any external resource to our HTML file, such as photos, files, CSS files, JS files, videos, etc.

Examples of File Path

PathDescription
<img src="nature.jpg">The "picture.jpg" file is located in the same folder as the current page
<img src="images/nature.jpg">The "picture.jpg" file is located in the images folder in the current folder
<img src="/images/nature.jpg">The "picture.jpg" file is located in the images folder at the root of the current web
<img src="../nature.jpg">The "picture.jpg" file is located in the folder one level up from the current folder

Note: To give the path of any file, it is necessary to know its source completely.{alertSuccess}

How Many Types of File Paths Are There

There are two types of File Paths:

  1. Absolute File Paths
  2. Relative File Paths

HTML File Paths

Understanding Absolute File Paths in HTML

Assume we include an image on our website that isn’t in our system but is on somebody else’s website. Then we need to add the image link inside the src attribute as a value. This type of URL is known as an absolute URL.

Note: An absolute file path specifies full URL address:{alertInfo}

Example:

<!DOCTYPE html>  
<html>  
<body>  

<h2>Using a Full URL File Path</h2>  

<img src="https://www.akashtimes.com/images/nature.jpg" alt="trees_image" style="width:300px">  

</body>  
</html>{codeBox}

Here https://www.akashtimes.com/images/nature.jpg is the link for the desired image.

Understanding Relative File Paths in HTML

If the image file is already in your system, we only need to enter the image’s path as a value inside the src attribute; this type of URL is known as a relative URL. 

Such File path can be given in 3 ways:

Below is an example of each of the three; copy the code and practice:

Example 1: (same folder)

<!DOCTYPE html>  
<html>  
<body>  

       <h2>File present in the same folder</h2> 

        <img src="nature.jpg" alt="My Image" style="width:400px">

</body>  
</html>{codeBox} 

Example 2: (one folder level-up from the current webpage folder)

<!DOCTYPE html>  
<html>  
<body>  

       <h2>File present in a folder above the current folder</h2> 

        <img src="../images/nature.jpg" alt="My Image" style="width:400px">

</body>  
</html>{codeBox}

Example 3: (root folder of the current web)

<!DOCTYPE html>  
<html>  
<body>  

       <h2>File present in a folder which is located at <br> 
        the root of the current subdirectories</h2> 

        <img src="/images/nature.jpg" alt="My Image" style="width:400px">

</body>  
</html>{codeBox} 

Essential Points for File path:

  • Always use the proper URL, file name, and image name, or it will not display on the webpage.
  • Try to use relative file paths so your code will be independent of the URL.

Conclusion:

Friends, according to my expertise, I have written complete information to help you with “HTML File Paths.” If this post is favorable for you or not, please tell me by commenting.

If you liked this post, do not forget to share it with your friends so they can get information about it.

You can ask us through comments if you still have questions or doubts, I will answer all your questions, and you can contact us for more information.

Please tell us through the comment section if you think we miss anything.

Post a Comment

If you have any problem please feel free to contact us by - AKASH TIMES

Previous Next

نموذج الاتصال