</>
Skip to content
HTML lessons (24/60)

HTML — File Paths

Friendly introduction – what & why

When you write HTML, you often need to connect other files: images, stylesheets, scripts, or other pages.
The way you tell the browser where those files live is called a file path.

A path is just a string that points to a location on the server or on your computer.

Getting paths right makes your site load correctly, and it prevents broken images or missing styles.

In this lesson we will explore three main kinds of paths, see how they look in HTML, and practice writing them.

Types of paths

1. Absolute (full) URLs

An absolute URL contains the protocol (http:// or https://) and the full domain name.
It works from anywhere because it tells the browser exactly where to go.

<a href="https://example.com/about.html">About us</a>

What the browser displays

A link that reads “About us”. Clicking it opens the page https://example.com/about.html in a new request.

2. Root‑relative paths

A root‑relative path starts with a slash / and is measured from the website’s root folder (the folder that maps to the domain).
It is useful when you move the whole site to a different domain but keep the same folder structure.

<link rel="stylesheet" href="/styles/main.css">
<img src="/images/logo.png" alt="Logo">

What the browser displays

The browser loads the CSS file located at /styles/main.css and shows the image at /images/logo.png.

3. Relative paths

Relative paths do not start with a slash. They are calculated from the location of the current HTML file.

There are two common forms: same‑folder (file.html) and parent‑folder (../file.html).

<!-- file is in the same folder as this page -->
<script src="app.js"></script>

<!-- file is one level up -->
<a href="../contact.html">Contact</a>

What the browser displays

The script tag loads app.js from the same directory. The link points to a file named contact.html that lives one folder higher.

Visualising folder structures

Imagine the following project layout:

my-site/
├─ index.html
├─ about.html
├─ scripts/
│   └─ app.js
├─ styles/
│   └─ main.css
└─ images/
    └─ logo.png

From index.html you would write:

<link rel="stylesheet" href="styles/main.css">
<script src="scripts/app.js"></script>
<img src="images/logo.png" alt="Logo">

From about.html (which lives next to index.html) the same paths work because the files share the same parent folder.

From scripts/app.js you cannot use the same relative path because the current file is deeper in the tree.

<!-- inside scripts/app.js you might need to refer to an image -->
<img src="../images/logo.png" alt="Logo">

What the browser displays

The image tag looks one level up (..) then into images/ to find logo.png.

Table: Path type comparison

Path typeStarts withExampleWhen to use
Absolute URLhttp:// or https://https://example.com/page.htmlLinking to external sites or CDN resources
Root‑relative//styles/main.cssSame site, but you may move the site to another domain
Same‑folder relative(none)script.jsFiles sit in the same directory
Parent‑folder relative../../images/pic.jpgNeed to go up one or more levels

Good to know: Browsers treat a leading slash (/) as “from the root of the domain”, not from the root of your hard drive.

Practical examples in a real page

Below is a small HTML page that uses all three path styles.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Path demo</title>
  <!-- Root‑relative CSS -->
  <link rel="stylesheet" href="/styles/main.css">
</head>
<body>
  <h1>File‑path showcase</h1>
  <!-- Same‑folder image -->
  <img src="images/logo.png" alt="Logo from same folder">
  <!-- Parent‑folder script -->
  <script src="../scripts/app.js"></script>
  <!-- Absolute link to an external article -->
  <p>Read more on <a href="https://developer.mozilla.org">MDN</a>.</p>
</body>
</html>

What the browser displays

A page titled “Path demo”. The stylesheet from /styles/main.css is applied.
The logo image appears, the script from ../scripts/app.js runs, and a link to MDN is shown.

Common mistake: Forgetting the leading slash in a root‑relative link makes the browser look for the file relative to the current page’s folder, often causing a 404 error.

Using paths with the <base> element

The <base> tag, placed inside <head>, sets a base URL for all relative links on the page.

<head>
  <base href="https://example.com/subfolder/">
  <link rel="stylesheet" href="styles/main.css"> <!-- resolves to https://example.com/subfolder/styles/main.css -->
</head>

What the browser displays

All relative URLs are resolved against https://example.com/subfolder/. The stylesheet loads from that full address.

Tip: Use <base> sparingly. It changes every relative link, which can be confusing for future maintainers.

Path pitfalls when deploying

  • Development machines often use file:/// URLs. Absolute paths that work locally may break on a web server.
  • Case sensitivity: Linux servers treat Image.png and image.png as different files.
  • Trailing slash matters: /folder and /folder/ can resolve to different resources.

Common mistakes checklist

  • Did you include the correct leading slash for root‑relative URLs?
  • Are you using ../ the right number of times to reach the target folder?
  • Did you test the page on a real HTTP server, not just by opening the file locally?
  • Are file names spelled with the exact same case as on the server?
  • If you added a <base> tag, did you verify that every link still points where you expect?

Mini Practice

  1. Create a folder called site. Inside it make index.html, a subfolder css with style.css, and a subfolder img with logo.png. Write the HTML that links the stylesheet and image using relative paths.

  2. From a file about/team.html (inside about/), link to index.html using a parent‑folder relative path.

  3. Write an anchor that points to the external URL https://github.com using an absolute URL.

  4. Add a <base> tag that makes all relative links resolve to https://mycdn.example.com/assets/. Then write a <script> tag that loads app.js using only the file name.

  5. Spot the error: <img src="/images/photo.jpg"> but the actual folder on the server is Images (capital I). Explain why the image fails to load on a Linux server.

Related Topics

JavaScript in HTMLHeadLayoutResponsive

Frequently Asked Questions about File Paths

What is File Paths in HTML?

File Paths is a fundamental concept in HTML. This lesson explains it step by step with clear examples, making it easy for beginners to understand.

How do I learn File Paths?

Start by reading the explanation above, then try the code examples. Practice by modifying the examples and experimenting with different values. Hands-on practice is the best way to learn File Paths.

Why is File Paths important in HTML?

File Paths is essential for HTML development. Understanding this concept will help you write better code and solve real-world problems more effectively.