HTML Relative URLs

Understanding HTML Relative URLs

A relative URL identifies a resource based on its location in relation to the current document. Instead of including the complete web address, the URL describes how to get from the current page to the destination file.

Relative URLs are commonly used for links between pages within the same website. The correct path depends on whether the destination is in the same directory, a subdirectory, or a parent directory.

Relative URL Syntax

A relative URL does not include the protocol or domain name. Its path is interpreted relative to the location of the document containing the link.

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

If the current document and contact.html are stored in the same directory, the browser can locate the destination using only the filename.

Linking Within the Same Directory

When the current page and destination page are in the same directory, use the destination filename as the relative URL.

website/
├── index.html
├── about.html
└── contact.html

A link from about.html to contact.html can be written as:

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

No directory information is necessary because both files are stored at the same level.

Linking to a Subdirectory

When the destination is inside a directory below the current document, include the directory name followed by a forward slash and the filename.

website/
├── index.html
└── products/
    └── computers.html

A link from index.html to computers.html can be written as:

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

The browser starts from the directory containing index.html, enters the products directory, and then opens computers.html.

Linking to a Parent Directory

Two periods followed by a forward slash (../) move the path up one directory level. This is useful when the destination is located above the current document in the directory structure.

website/
├── index.html
└── products/
    └── computers.html

A link from computers.html back to index.html can be written as:

<a href="../index.html">Home</a>

The ../ tells the browser to move from the products directory up to its parent directory before looking for index.html.

Moving Through Multiple Directory Levels

When a document is nested several directories deep, additional ../ sequences can be used to move up more than one level.

website/
├── index.html
└── products/
    └── computers/
        └── laptops.html

From laptops.html, the following path moves up two directory levels to reach index.html:

<a href="../../index.html">Home</a>

Each ../ moves up one level in the directory structure.

Relative URL Example

The following example demonstrates several relative links based on a simple website directory structure.

website/
├── index.html
├── about.html
├── contact.html
└── products/
    └── computers.html

<h2>Website Navigation</h2>

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

Try changing the relative paths in the editor to see how the location of a destination file determines the URL that must be used.

Relative vs Root-Relative URLs

A relative URL starts from the location of the current document, while a root-relative URL starts from the root directory of the website.

<!-- Relative URL -->
<a href="../images/logo.png">Logo</a>

<!-- Root-relative URL -->
<a href="/images/logo.png">Logo</a>

The relative path may need to change when the same link is placed in a document stored at a different directory level. A root-relative URL begins with a forward slash and remains based on the website root regardless of the current page's directory.

Relative URL Best Practices

• Use relative URLs when linking to resources based on the current document's location.
• Use only the filename when the destination is in the same directory.
• Include directory names when linking to files in subdirectories.
• Use ../ to move up one directory level.
• Use additional ../ sequences when moving up multiple directory levels.
• Use forward slashes (/) in URL paths.
• Keep your website directory structure organized so relative paths are easier to understand and maintain.
• Test links after moving or renaming files because their relative paths may need to be updated.

Summary

Relative URLs locate resources in relation to the current document. A filename can link to a file in the same directory, directory names can move down into subdirectories, and ../ can move up through parent directories. Understanding these relationships is essential when linking files within an organized website.