HTML File Paths
The file path defines a location of a specific file on a web server.
In order to link external files to a web page, we have to make sure the correct file paths are provided.
External files can be any of any type like web pages, images, media files, CSS style sheets, and Javascript files.
Absolute File Paths
If we provide the full path of a file, then it is considered to be an absolute file path as shown below.
Links with absolute paths
<a href="https://randomcodez.com/assets/logo/logo.png">Logo</a>
<a href="https://randomcodez.com/assets/favicon/favicon.ico">Favicon</a>Image linked with absolute path
<img src="https://randomcodez.com/assets/logo/logo.png" alt="logo">CSS style sheet linked using absolute path
<link href="https://randomcodez.com/assets/css/sample.css" rel="stylesheet">Javascript file linked using absolute path
<script src="https://randomcodez.com/assets/js/sample.js"></script>Relative File Paths
If we do not provide the full path of a file, then it is considered to be a relative file path as shown below.
When we use relative file paths, we have to make sure we define the base URL correctly, as it will be used by all relative paths to resolve their absolute paths.
If the base URL is defined as below, then all the below relative paths will point to the exact resources that are pointed above using absolute paths.
<base href="https://randomcodez.com/">Links with relative paths
<a href="assets/logo/logo.png">Logo</a>
<a href="assets/favicon/favicon.ico">Favicon</a>Image linked with relative path
<img src="assets/logo/logo.png" alt="logo">CSS style sheet linked using relative path
<link href="assets/css/sample.css" rel="stylesheet">Javascript file linked using relative path
<script src="assets/js/sample.js"></script>Relative Path Types
We can define the relative paths in many ways which will change the location of the directory that it fetches for the resources on the webserver.
Relative path to link a resource in the root directory, which needs an extra slash before the relative path.
<img src="/assets/logo/logo.png" alt="logo">Relative path to link a resource from the current directory, which doesn't need an extra slash before the relative path.
<img src="assets/logo/logo.png" alt="logo">Relative path to link a resource from the directory which is one level up from the current directory, which needs two dots (to move one level up from the current directory and a slash.
<img src="../assets/logo/logo.png" alt="logo">Relative path to link a resource from the directory which is two levels up from the current directory, which needs two sets ../ as shown below.
<img src="../../assets/logo/logo.png" alt="logo">Which one to choose?
Always choose absolute URLs for the URLs that point to resources outside the website's web server.
Always choose relative URLs over absolute URLs for all the resources on the webserver on which the website is hosted.
- It makes the URLs work on the production webserver
- It also makes the URLs work on your own computer (using localhost)
- It also makes the URLs work even when the webserver is changed in future
Overall
It's important to understand how to build correct file paths to properly link the resources in an HTML document.