File Paths in HTML with Examples

In this article, I am going to discuss File Paths in HTML with Examples. Please read our previous article where we discussed JavaScript in HTML with Examples. At the end of this article, you will learn everything about HTML File Paths with Examples.

HTML File Paths

The location of a file in a website folder is specified using an HTML file path. For a web browser, file paths are identical to file addresses. With the use of file paths, we can add any external resource to our HTML file, such as photos, files, CSS files, JS files, videos, and so on.

<img src=”demoimg.jpg”>: It specifies that the image file is located in the same folder as the current page
<img src=”images/demoimg.jpg>: It specifies that the image file is located in the images folder in the current folder.
<img src=”/images/demoimg.jpg”>: It specifies that the image file is located in the images folder in the root directory of the current web.
<img src=”../demoimg.jpg”>: It specifies that the image file is located in the folder one level above the current folder.

Absolute File Path in HTML

Assume we’re including an image in our website that isn’t in our system but is on someone 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 absolute URL.

< img src=”https://www.xyz.com/image” >, Here https://www.xyz.com/image is the link for the desired image.

Example:

<!DOCTYPE html>
<html>
<body>

<h2>Absolute Path</h2>

<img src="https://cdn.pixabay.com/photo/2021/09/17/08/40/lake-6632026_960_720.jpg" alt="Mountain" style="width:500px">
</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

Relative File Path in HTML

If the image is already in our 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. It’s a good practice to use relative URLs to avoid errors.

<img src=”desktop/image.jpg” >, Here the image is located on our desktop so we have added the path of the image to the src attribute.

Example

<!DOCTYPE html>
<html>
<body>

<h2>Relative Path</h2>
<img src="/images/picture.jpg" alt="Mountain" style="width:500px">

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

In the case of an absolute URL, if the image is deleted from our source website, we would not be able to display it on the screen. So, in the case of an absolute URL, we are dependent on an external source to display an image on the screen, whereas a relative URL is not dependent on any external source to display an image on the screen. This is the advantage of relative URLs over absolute URLs.

In the next article, I am going to discuss Layout in HTML with Examples. Here, in this article, I try to explain File Paths in HTML with Examples and I hope you enjoy this HTML File Paths with Examples article.

Dot Net Tutorials

About the Author: Pranaya Rout

Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.