HTML File Paths

❮ Previous Next ❯

HTML File Paths: Locating Resources

HTML file paths tell the browser where to find resources like images, videos, scripts, and other documents. They ensure that all required files load correctly on a webpage.

File paths help the browser locate and load external resources.
The src (source) attribute specifies the path to files such as images, videos, or scripts.
Example: <img src="path/image.jpg" alt="description"> inserts an image using its file path.

Types of File Paths

There are two main ways to reference a file path in HTML: Absolute and Relative.

1. Absolute File Paths

An absolute file path specifies the full URL or complete location of a resource, starting from the root of the website or including the domain name.

Points directly to a resource's location on the internet and includes the full URL, which consists of the protocol (http:// or https://), domain, and path to the resource.
Best for resources that are hosted externally. The browser knows exactly where to find them regardless of the current document’s location.

Absolute Path Syntax

<img src="https://www.example.com/images/picture.png" alt="My Image">

Absolute File Paths Example:

<!DOCTYPE html>
<html>
<head>
    <title>Absolute file path</title>
</head>
<body>
    <h2>Loading an image from an external URL</h2>
    <img src="images/intricate.png" 
         alt="Absolute Path Image" 
         style="width: 400px;" />
</body>
</html>

2. Relative File Paths

Relative file paths locate resources based on the HTML file’s current location, keeping links portable.

Specify the path to a resource in relation to the location of the HTML file currently being viewed.
Ideal for resources within the same website. Keeps your HTML portable if the domain changes since the path doesn’t need to be updated.

Relative Path Syntax

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

Relative File Paths Example:

<!DOCTYPE html>
<html>
<head>
    <title>Relative file path</title>
</head>
<body>
    <h2>File present in the same folder or subfolder</h2>
    <img src="images/intricate.png" 
         alt="IntricateDevo Logo" 
         style="width: 400px;">
</body>
</html>

In this example, the relative file path "images/intricate-logo.png" indicates that the image file is located in a subfolder named "images" relative to the current HTML file.

Relative Path Variants

When using relative file paths, you can use specific characters to navigate through your project's folders:

Document-relative paths: The path starts directly from the directory of the current HTML document. (e.g., images/picture.jpg)
Root-relative paths: Start with a slash (/), which tells the browser to look for the resource starting from the root directory of the server.
- Example: <img src="/images/picture.jpg">
Directory-relative paths: Use dot notation to navigate the directory structure:
- ./ refers to the current directory.
- ../ moves up one directory level.
- Example: <img src="../images/picture.jpg"> (Goes up one directory, then looks into the images folder)

Best Practices for Using HTML File Paths

To maintain a healthy and easily manageable project, follow these best practices:

Keep a Consistent Structure: Organize your files in a logical structure (e.g., separate folders for /css, /js, and /images). This makes it easier to manage and reference your resources.
Use Relative Paths for Internal Resources: This makes your website more portable and easier to maintain, especially if you migrate to a different domain or server.
Test Paths Locally and on the Server: Paths that work on your local machine may not function the same way on a web server due to different directory structures or permissions.
Avoid Spaces in Filenames: Spaces can cause issues in URLs and make linking more complex. Use hyphens (-) or underscores (_) instead (e.g., my-image.jpg).

Exercise

Which relative path notation is used to move UP one directory level before looking for a file?

./ / // ../