HTML File Paths Explained: Absolute vs. Relative

Category: Best Practices | Published on: by Dr. Talib

One of the most common points of confusion for beginners is how to correctly link to files like images, stylesheets, and scripts in HTML. A broken image or an unstyled page is often just a matter of an incorrect file path. Understanding the difference between absolute and relative paths is essential for building websites that work reliably.

This guide will make file paths simple and clear, with practical examples.

What is a File Path?

A file path specifies the location of a file in a website's folder structure. You use them every time you link to a resource, for example in the href attribute of a <link> tag or the src attribute of an <img> or <script> tag.

Example Folder Structure

Let's use this example folder structure for the rest of the guide:

my-website/ ├── index.html ├── about.html │ ├── css/ │ └── style.css │ └── images/ └── logo.png

Absolute File Paths

An absolute file path is a full URL that points to a specific location on the web. It includes the protocol (https://), the domain name, and the full path to the file. It is not related to your current location.

<!-- Linking to an external image -->
<img src="https://www.example.com/images/photo.jpg" alt="A photo from another website">

<!-- Linking to an external stylesheet (like Google Fonts) -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter">
  • When to use it: When linking to a resource that is hosted on another website.
  • Pros: Unambiguous. It will always point to the same file, no matter where your HTML file is.
  • Cons: If you move your own site to a new domain, you'd have to update all absolute links pointing to your own content.

Relative File Paths

A relative file path points to a file relative to the current page. This is the most common way to link to internal files within your own website because it makes your project portable. If you move your project folder, all the links will still work.

1. Relative to the Same Folder

If the file you're linking to is in the same folder as your HTML file, you just need the file name.

From index.html, to link to about.html:

<a href="about.html">About Us</a>

2. Relative to a Subfolder

To link to a file in a subfolder, you write the folder name, a forward slash, and then the file name.

From index.html, to link to style.css (inside the css folder):

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

From index.html, to link to logo.png (inside the images folder):

<img src="images/logo.png" alt="My Website Logo">

3. Relative to a Parent Folder

To link to a file in a parent folder (i.e., to go "up" one level), you use two dots and a slash (../).

Imagine we have an HTML file inside the css folder. To link from that file back up to index.html, you would write:

<a href="../index.html">Back to Home</a>

Pro Tip: Root-Relative Paths. A path that starts with a single forward slash (/) is relative to the root of the domain. For example, <a href="/about.html"> will always link to yourdomain.com/about.html, no matter how deep the current page is. This is a very robust way to handle internal links on a live server.

Conclusion

Getting file paths right is a fundamental skill. Here’s a simple summary:

  • Absolute Paths (full URL): Use for external resources (files on other websites).
  • Relative Paths (e.g., images/logo.png or ../index.html): Use for all internal resources within your project. This is the best practice for making your site portable.

By sticking to these rules, you'll avoid broken links and build websites that are much easier to manage and deploy.

Use our Live HTML Viewer to create a mini-site with different folders and practice your file path skills!