HTML File Paths

A file path tells the browser where to find a file, such as an image, a CSS file or another page.

Where File Paths Are Used

You write a file path every time an attribute points to another file:

If the path is wrong, the browser cannot find the file. You get a broken image, a page without styles, or a "404 Not Found" page.

An Example Website Folder

Imagine Ali is building a website for his computer shop in Karachi. His folder looks like this:

ali-computers/
  index.html
  about.html
  css/
    style.css
  images/
    logo.png
    laptops/
      dell.jpg
  products/
    laptops.html

All the examples below use this folder.

Relative Paths

A relative path starts from the folder of the current page. It is the most common type of path inside your own website.

From index.html, the logo is at images/logo.png:

<!-- inside index.html -->
<img src="images/logo.png" alt="Ali Computers logo">
<a href="products/laptops.html">See our laptops</a>

From products/laptops.html, the page is one folder deeper, so you must go up first with ../:

<!-- inside products/laptops.html -->
<link rel="stylesheet" href="../css/style.css">
<img src="../images/laptops/dell.jpg" alt="Dell laptop">
<a href="../index.html">Back to home</a>

Root-Relative Paths

A path that starts with a slash / begins at the root (top folder) of the website, no matter where the current page is.

<img src="/images/logo.png" alt="Ali Computers logo">
<link rel="stylesheet" href="/css/style.css">

This works the same from every page, which is handy for menus and headers. But it only works when the site is served by a web server. If you open the file directly from your computer (a file:// address), / means the top of your hard disk, and the files are not found.

Absolute Paths (Full URLs)

An absolute path is a full web address with https:// and the domain name. Use it for files on another website.

<!DOCTYPE html>
<html>
<body>

<h2>Absolute and Relative Links</h2>
<p><a href="https://www.wikipedia.org/">Wikipedia (absolute URL)</a></p>
<p><a href="about.html">About page (relative path)</a></p>
<p><a href="#top">Top of this page (same page)</a></p>

</body>
</html>

Common Mistakes

1. Wrong slash. Windows shows paths like images\logo.png. On the web, always use a forward slash: images/logo.png.
2. Wrong case. Web servers often treat Logo.PNG and logo.png as different files. Use lowercase file names.
3. Spaces in names. my photo.jpg can cause problems. Use hyphens: my-photo.jpg.
4. Forgetting `../`. A page inside a subfolder must go up before it can reach files in other folders.

Exercise