File Paths in HTML

In HTML, we often refer to other files like images, CSS, or JavaScript. To load these elements properly, we must specify the correct file path.

Absolute Path

An absolute path is a complete URL starting with the protocol (https://) and domain. Use it when referring to external files.

<img src="https://example.com/images/logo.png" alt="Logo">

Relative Path

A relative path defines the location relative to the current file. This is the most common method within your project’s structure.

<img src="images/photo.jpg" alt="Photo">

Accessing a File from Parent Folder

If the target file is one level above the current one, use ../ to reach the parent folder.

<img src="../assets/image.png" alt="Image from parent folder">

Accessing a File from the Same Folder

If the file is in the same folder as your HTML file, just write the filename.

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

Accessing a File in a Subfolder

If the file is in a subfolder, first write the folder name, then the filename, e.g., 'scripts/main.js'.

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

Tips for Using File Paths

Always double-check your folder and file structure. Avoid invalid characters (e.g., spaces or accents) and use consistent naming. Remember that filenames can be case-sensitive, especially on servers.

Example of a Project Structure

The folder structure below helps illustrate what a basic HTML project might look like:

project/
├── index.html
├── style.css
├── images/
│   └── logo.png
└── scripts/
    └── app.js

In the structure above, this is how you can access other files from index.html. This kind of visual helps you understand pathing.

Practical Example

Let’s look at a practical example of how to correctly reference various files in a real project:

<!-- Reference to an image -->
<img src="images/logo.png" alt="Logo">

<!-- Reference to a CSS file -->
<link rel="stylesheet" href="style.css">

<!-- JavaScript script -->
<script src="scripts/app.js"></script>

Summary

Specifying paths accurately is crucial, especially for larger projects. Always make sure the path reflects the actual file structure.