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.
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:
The complete URL address is specified by the absolute file path.
<img src=" https://www.learnetutorials.com/logo.png" alt="logo">
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.
