Learn Java, Angular, SQL with Coding Exercises & Career Tips

File Path

Video Tutorial Discussion

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.