Loading
In HTML, file paths are used to specify the location of resources such as
  • Images
  • CSS stylesheets
  • JavaScript files
  • Other linked files
There are two main types of file paths
1. Relative File Path
2. Absolute File Path

1. Relative File Path
A relative file path points to a file based on the current location of the HTML file. It is the most commonly used type for local projects.

Example: Files in the same directory
<!DOCTYPE html>
<html>
 <head>
  <title>Files in the same directory</title>
 </head>
 <body>
  <img src="image.jpg">
 </body>
</html>

Example: File in a subdirectory
<!DOCTYPE html>
<html>
 <head>
  <title>File in a subdirectory</title>
 </head>
 <body>
  <img src="images/image.jpg">
 </body>
</html>

Example: File in the parent directory
<!DOCTYPE html>
<html>
 <head>
  <title>File in the parent directory</title>
 </head>
 <body>
  <img src="../image.jpg">
 </body>
</html>
Relative paths are flexible and better for websites that may move folders or get uploaded to a server.

2. Absolute File Path
An absolute file path gives the complete location of the file, either on your local computer or from a liver URL.

Example: Full file system path (for local use only not recommended for web)
<!DOCTYPE html>
<html>
 <head>
  <title>Full file system path</title>
 </head>
 <body>
  <img src="C:/quipoin/asset/image/image.jpg">
 </body>
</html>
These paths would not work on websites because browsers can not access local file paths from the internet.

Example: Root-based absolute path (used in web servers)
<!DOCTYPE html>
<html>
 <head>
  <title>Root-based absolute path</title>
 </head>
 <body>
  <img src="/assets/images/image.jpg">
 </body>
</html>
Begins from the root / of the domain.

Example: Full URL path (absolute link to external resources)
<!DOCTYPE html>
</html>
 <head>
  <title>Full URL path</title>
 </head>
 <body>
  <img src="https://example.com/images/image.jpg">
 </body>
</html>
This is how you embed resources hosted on another website.

Tips
  • Use relative paths for internal resources (local projects or same server).
  • Use absolute URL for external content (like CDN image or scripts).
  • Avoid using local file system paths in deployed websites.