HTML Root-Relative URLs

Understanding HTML Root-Relative URLs

A root-relative URL identifies a resource by starting from the root directory of the website. Root-relative URLs begin with a forward slash (/), followed by the path to the destination.

Because the path always begins at the website root, the same root-relative URL can generally be used from pages located at different directory levels without adding ../ to navigate back through parent directories.

Root-Relative URL Syntax

A root-relative URL begins with a forward slash, which tells the browser to start at the root of the current website before following the rest of the path.

<a href="/contact.html">Contact Us</a>

The leading slash distinguishes this URL from a relative URL such as contact.html, which would be resolved from the directory containing the current document.

Understanding the Root Directory

The root directory is the top-level directory from which the files and directories of a website are served. Pages, images, stylesheets, scripts, and other website resources can be organized into directories below this starting point.

website-root/
├── index.html
├── about.html
├── contact.html
├── images/
│   └── logo.png
└── products/
    └── computers.html

In a root-relative URL, the initial forward slash represents this website root. The path that follows describes the location of the requested resource beneath it.

The Leading Forward Slash

The leading forward slash is the key feature of a root-relative URL. It tells the browser not to begin from the current page's directory.

<a href="/products/computers.html">Computers</a>

The browser begins at the website root, enters the products directory, and then requests computers.html.

Using Root-Relative URLs Across Directory Levels

One advantage of root-relative URLs is that the same path can be used from documents stored at different levels of the website directory structure.

website-root/
├── index.html
├── contact.html
└── products/
    └── computers/
        └── laptops.html

Both index.html and the deeply nested laptops.html page can use the same root-relative URL to link to the contact page:

<a href="/contact.html">Contact Us</a>

The path does not need to change based on the location of the page containing the link because it always begins from the website root.

Root-Relative URL Example

The following example uses root-relative URLs to link to several resources from the website root.

<h2>Website Navigation</h2>

<p><a href="/about.html">About Us</a></p>
<p><a href="/contact.html">Contact Us</a></p>
<p><a href="/products/computers.html">Computers</a></p>

Try changing the paths in the editor and compare URLs that begin with a forward slash with URLs that are relative to the editor page itself.

Root-Relative vs Relative URLs

Relative URLs are resolved from the location of the current document, while root-relative URLs are resolved from the website root.

<!-- Relative URL -->
<a href="../../contact.html">Contact Us</a>

<!-- Root-relative URL -->
<a href="/contact.html">Contact Us</a>

If the current document is moved to another directory, the relative URL may need to be changed. The root-relative URL continues to point to the same location as long as the destination remains in the same location relative to the website root.

Root-Relative vs Absolute URLs

A root-relative URL starts at the root of the current website but does not include the protocol or domain name. An absolute URL includes the complete address of the resource.

<!-- Root-relative URL -->
<a href="/html5/tutorials/">HTML Tutorials</a>

<!-- Absolute URL -->
<a href="https://www.example-web.site/html5/tutorials/">HTML Tutorials</a>

Root-relative URLs are useful for internal website resources because the domain does not need to be repeated in every link. Absolute URLs are commonly used when linking to resources on another website.

Root-Relative URL Best Practices

• Begin a root-relative URL with a forward slash (/).
• Remember that the leading slash represents the root of the current website.
• Use root-relative URLs when the same internal path needs to work from pages at different directory levels.
• Use forward slashes to separate directories in URL paths.
• Keep website directories organized so paths remain easy to understand and maintain.
• Update links if a destination file or directory is renamed or moved.
• Use an absolute URL when the destination is located on another website.

Summary

Root-relative URLs begin with a forward slash and locate resources starting from the root directory of the current website. Because they do not depend on the current document's directory level, they are especially useful for consistent internal links across websites with organized directory structures.