HTML File Paths Tutorial

HTML file paths specify the location of a file within a website structure. There are different types of file paths that you can use depending on the location of the file you want to link to.

Absolute File Paths

An absolute file path specifies the full URL to the file, starting from the root directory of the website. This is typically used when linking to files on external websites or when linking to files in a different domain.

For example, the absolute file path to an image file on an external website might look like this:

<img src="https://www.example.com/images/image.jpg" alt="Image">

Root-Relative File Paths

A root-relative file path specifies the path to a file starting from the root directory of the website. This is useful when linking to files located within the same domain.

For example, the root-relative file path to a stylesheet file in a css directory might look like this:

<link href="/css/style.css" rel="stylesheet">

Document-Relative File Paths

A document-relative file path specifies the path to a file starting from the current directory of the webpage. This is useful when linking to files within the same directory or in subdirectories.

For example, the document-relative file path to an image file in an images directory might look like this:

<img src="images/image.jpg" alt="Image">

Parent Directory File Paths

A parent directory file path specifies the path to a file located in a parent directory of the current directory. This is useful when linking to files in directories above the current directory.

For example, the parent directory file path to a script file in a js directory located one level above the current directory might look like this:

<script src="../js/script.js"></script>