HTML File Paths
On this page, you can learn about HTML file paths, find the difference between the absolute and relative file paths and see different useful examples.
A file path defines the location of a file in a web site's folder structure.
A file path is used when we link to such external files like:
- web pages
- images
- JavaScripts
- style sheets
There exist absolute and relative file paths.
Absolute File Paths
An absolute file path is the URL to access an internet file.
Example of an absolute file path:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Absolute File Path Example</h2>
<img src="https://www.slrlounge.com/wp-content/uploads/2019/11/Sea-Thru-Underwater-Photography-Algorithm-SLR-Lounge_0001-1000x675.jpg" alt="Sea" style="width:300px" />
</body>
</html>Relative File Paths
A relative file path refers to a file that is relative to the current page. In the example below, the path is root-relative (starts with /), pointing to a file in the images folder at the root of the website:
Other common relative paths include ./file.html (same directory) and ../folder/file.html (parent directory).
Example of a relative file path:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Relative File Path Example</h2>
<img src="/build/images/smile-small.jpg" alt="Smile" width="290" height="260" />
</body>
</html>Practice
Practice
What are the types of file paths in HTML?