HTML File Paths
A file path describes where a file sits in a website's folder structure. File paths are used when linking to external files like web pages, images, style sheets, and JavaScripts.
Some examples: picture.jpg is in the same folder as the current page; images/picture.jpg is in an images folder inside the current folder; /images/picture.jpg is in an images folder at the root of the site; and ../picture.jpg is in the folder one level up from the current one.
Absolute File Paths
An absolute file path is the full URL to a file.
Example
An image referenced by its full URL.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Absolute Path</title>
</head>
<body>
<img src="https://prompt-cookbook.com" alt="Mountain">
</body>
</html>
Relative File Paths
A relative file path points to a file relative to the current page.
Root of the site
A path to the images folder at the root of the site.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Relative Root</title>
</head>
<body>
<img src="/images/picture.jpg" alt="Mountain">
</body>
</html>
Current folder
A path to the images folder in the current folder.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Relative Current</title>
</head>
<body>
<img src="images/picture.jpg" alt="Mountain">
</body>
</html>
One level up
A path to the images folder one level up from the current folder.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Relative Up</title>
</head>
<body>
<img src="../images/picture.jpg" alt="Mountain">
</body>
</html>
Best Practice
It is best practice to use relative file paths when possible. With relative paths, your pages are not tied to your current base URL, so links work on your own computer (localhost) as well as on your current and future public domains.