HTML File Paths: Relative, Absolute and Root-Relative URLs

Learn how HTML file paths work using relative, absolute and root-relative URLs for links, images and other resources.

Relative paths

A relative URL points to a resource from the current page. If index.html and about.html are in the same folder, link between them with a file name:

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

Use a folder name to move down into a subfolder, or ../ to move up one level.

<img src="images/logo.png" alt="Site name">
<a href="../contact/">Contact</a>

Root-relative paths

A path that begins with / starts at the website root, which can be useful for shared site navigation.

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

If a site is hosted inside a subdirectory, root-relative URLs still start at the domain root. Check the deployment path before using them in a project hosted below the root.

Absolute URLs

An absolute URL includes the protocol and domain, such as https://example.com/guide/. Use one when linking to a resource on another site or when a full URL is required.