The HTML file path describe the location of file in the specified folder structure while making any website.
The file path comes in use when we require to link some external files into our code.
For example:
- Basic link to any web page
- Images
- CSS Stylesheets
- Javascripts
HTML file path are classified further into two categories:
- Absolute File Path
- Relative File Path
ABSOLUTE FILE PATH
As the name suggest this is the path which consist of full URL to a file. An absolute path always contains the root element.
Example:
<img src="C:/Users/hp/Downloads/images/picture.jpg" alt="image1">
RELATIVE FILE PATH
A relative path refers to a location that is relative to a current directory. Relative paths make use of two special symbols, a dot (.) and a double-dot (..), which translate into the current directory and the parent directory. Double dots are used for moving up in the hierarchy. A single dot represents the current directory itself.
Example 1:
<img src="/images/picture.jpg" alt="image2">
In the following example, the file path points to a file in the images folder located at the root of the current directory
Example 2:
<img src="./images/picture.jpg" alt="image3">
In the following example, the file path points to a file in the images folder located in the current folder
Example 3:
<img src="../images/picture.jpg" alt="image3">
In the following example, the file path points to a file in the images folder located in the folder one level up from the current folder
BEST PRACTICE
Although relative paths hold less information than absolute paths, they are shorter and easier to work with (especially in deeply nested directories).
It is best practice to use relative file paths (if possible).