File-Path

File Path

In HTML, file paths are used to specify the location of resources such as images, stylesheets, scripts, and other files that are linked to or embedded within your web page.

There are two main types of file paths:

Relative paths
Absolute paths.

Relative File Path

A relative file path specifies the location of a file relative to the current location of the HTML file.
Relative paths are often used to reference files within the same directory or within subdirectories of the current directory.

Example: To reference a file in the same directory

<!DOCTYPE html>
<html>

<head>
    <title>Example</title>
</head>

<body>
    <h3>File Path example</h3>
    <img src="image.jpg">
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
</body>

</html>

Output:

Example: To reference a file in a subdirectory

<!DOCTYPE html>
<html>

<head>
    <title>Example</title>
</head>

<body>
    <h3>File Path example</h3>
    <img src="images/image.jpg">
    <link rel="stylesheet" href="css/styles.css">
    <script src="js/script.js"></script>
</body>

</html>

Output:

Absolute File Path

An absolute file path specifies the complete path to a file starting from the root directory.
Absolute paths are used to specify files regardless of the current location of the HTML file.

Example:

<!DOCTYPE html>
<html>

<head>
    <title>Example</title>
</head>

<body>
    <h3>File Path example</h3>
    <img src="C:\path\to\image.jpg">
    <link rel="stylesheet" href="D:\web\styles.css">
    <script src="E:\project\script.js"></script>

</body>

</html>

Output:

Example:

<!DOCTYPE html>
<html>

<head>
    <title>Example</title>
</head>

<body>
    <h3>File Path example</h3>
    <img src="/path/to/image.jpg">
    <link rel="stylesheet" href="/web/styles.css">
    <script src="/project/script.js"></script>
</body>

</html>

Output:

Example:

<!DOCTYPE html>
<html>

<head>
    <title>Example</title>
</head>

<body>
    <h3>File Path example</h3>
    <img src="https://example.com/images/image.jpg">
    <link rel="stylesheet" href="https://example.com/css/styles.css">
    <script src="https://example.com/js/script.js"></script>
</body>

</html>

Output: