HTML File Paths

A file path describes the location of a file inside a website's folder structure. Whenever a page needs to load or point to another resource, it uses a file path to find it.

This page covers the two kinds of file paths — absolute and relative — the different forms a relative path can take, and which one to reach for in practice. You will use file paths constantly when working with:

Path Types at a Glance

Every path you write is one of the following. The same rules apply whether the path appears in an <a href>, <img src>, <link href>, or <script src>.

Path	Type	Meaning	When to use
`https://example.com/img/cat.jpg`	Absolute URL	The full address, including the protocol and domain.	Linking to a file on another website.
`/images/cat.jpg`	Root-relative	Starts at the site's root (the leading `/`), regardless of the current page's location.	Sitewide assets (logos, global CSS/JS) shared across many pages.
`images/cat.jpg`	Relative (same directory)	Starts from the current page's folder. Equivalent to `./images/cat.jpg`.	Files stored next to the page.
`../images/cat.jpg`	Relative (parent directory)	`..` moves up one folder, then down into `images`.	Reaching a file that lives above the current page.

A root-relative path is technically a relative path too, but the leading / makes it relative to the site root rather than to the current page — so it is worth treating as its own category.

Absolute File Paths

An absolute file path is the complete URL used to reach a file, including the protocol (https://) and domain name. It works from any page because it does not depend on where the current page lives.

Example of an absolute file path:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Absolute File Path Example</h2>
    <img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs logo" style="width:300px" />
  </body>
</html>

Try it Yourself »

Use an absolute URL when the resource lives on a different domain (for example, an image hosted on a CDN or another site).

Relative File Paths

A relative file path points to a file relative to the current page instead of spelling out the full domain. Relative paths come in a few forms.

Same directory

When the target file sits in the same folder as the current page, write just the file name. Adding ./ (meaning "current folder") is optional and behaves identically.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Same-Directory Path Example</h2>
    <img src="images/smile.jpg" alt="Smile" width="290" height="260" />
  </body>
</html>

Try it Yourself »

Here images/smile.jpg is resolved starting from the folder that contains the current page.

Parent directory

Use ../ to move up one level in the folder tree. Each ../ climbs one more folder. For example, ../images/smile.jpg leaves the current folder, then looks inside an images folder that is one level up.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Parent-Directory Path Example</h2>
    <img src="../images/smile.jpg" alt="Smile" width="290" height="260" />
  </body>
</html>

Root-relative

A path that starts with a slash (/) is root-relative: the browser resolves it from the website's root, ignoring where the current page is. This is handy for assets shared across the whole site, because the path stays the same no matter how deeply a page is nested.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Root-Relative Path Example</h2>
    <img src="/images/smile.jpg" alt="Smile" width="290" height="260" />
  </body>
</html>

Paths Are Not Only for Images

The same path rules apply to every attribute that references a file. A single document often mixes all of them:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <!-- root-relative stylesheet, shared site-wide -->
    <link rel="stylesheet" href="/css/styles.css" />
  </head>
  <body>
    <!-- relative link to a page in the same folder -->
    <a href="about.html">About us</a>

    <!-- relative link to a page one level up -->
    <a href="../index.html">Home</a>

    <!-- absolute link to an external site -->
    <a href="https://www.w3docs.com/">W3docs</a>

    <!-- relative script next to the page -->
    <script src="js/app.js"></script>
  </body>
</html>

Best Practice

Prefer relative paths for resources that live on your own site. Because they do not hard-code a domain, the site keeps working when you move it to a new domain, switch from http to https, or run it locally during development. Reserve absolute URLs for files hosted on other sites, and use root-relative paths for global assets that many pages share.

Read more about linking pages in the HTML Links chapter and about embedding images with the <img> tag.

Practice

Which of these are valid types of HTML file paths?

Absolute File PathsRelative File PathsRoot-Relative File PathsVirtual File Paths