Home » HTML

HTML file path

HTML File path: Here, we are going to learn about the HTML file paths - absolute file path and Relative file path.
Submitted by Jhanvi Tripathi, on July 28, 2019

An HTML file path specifies the location of a file in the website folder. The file paths are very similar to an address of file for the web browser. With the HTML file paths, one could link any external file or resource to the HTML file.

File paths are used on the HTML webpages to link the external files such as a Web page, an image, a style sheets or a JavaScript.

In HTML, the file paths are of two different types:

1. Absolute file paths
2. Relative file paths

1) The absolute file paths

The absolute file path specifies the full address or says the URL to access that internet file.

An example to illustrate the absolute file path is as follows,

    <img src="https://www.includehelp/htmlpage.jpg"/>

2) The relative file paths

The relative file paths specify the path of the required file relative to the location of the current web page. When one is using the relative file paths, then his web pages would not be bounded to the current base URL. The links, they will work on localhost as well as on the current public domain.

An example to illustrate the relative file path is as follows,

    <img src="/images/yourimagename.jpg" />

The file paths in the HTML document are specified as,

    <img src="imagename.png" />

Such file links are used when the required file is present in the same folder with the HTML document. Here no need to specify the folder or any other location details.

    <img src="foldername/imagename.jpg" >

Such file links are used when the required file is present in some folder named as foldername. This folder foldername is present within the folder in which the HTML document is present or the current folder.

    <img src="/foldername/imagename.jpg" />

Such file links are used the required file is present in a folder named as the foldername. This folder is present at the root folder of the webpage.

    <img src="C:/user/desktop/.../imagename.jpg" />

Here the full address of the image is specified within the source attribute. In such a file path, the complete path or the location has to be specified.

One has to remember to use a proper URL or location of the file, the file name, the image name, or else the browser would not display the required file on the webpage. Instead of the required file, anything would be shown.

Often it is asked to used the relative file paths in the HTML document so that the code would be independent of the URL.