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.
{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
| Path | Description |
|---|---|
| <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:
- Absolute File Paths
- Relative 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.
