A relative URL specifies the location of a webpage, file, image, or other resource relative to the current webpage. Unlike an absolute URL, a relative URL does not contain the complete domain name or protocol.

Relative URLs are commonly used for internal links, images, CSS files, JavaScript files, and other resources within the same website.

If you are learning HTML links, first understand HTML Links and HTML Link Syntax.

What Is a Relative URL?

A relative URL provides a path to a resource based on the location of the current webpage.

For example:

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

Here, about.html is a relative URL. The browser looks for the about.html file relative to the current page.

Unlike an absolute URL, it does not include:

https://www.example.com/

Relative URL Syntax

A relative URL can be written in several ways depending on where the target resource is located.

about.html
images/photo.jpg
../about.html
/html/html-links/

The correct path depends on the location of the current HTML document and the resource you want to access.

Linking to a Page in the Same Folder

If two HTML files are located in the same folder, you can link to another file using only its filename.

Suppose your folder contains:

index.html
about.html
contact.html

You can create a link from index.html to about.html like this:

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

The browser looks for about.html in the same folder as the current page.

Linking to a Subfolder

You can use a folder name when the target file is inside a subfolder.

For example:

index.html
html/
    elements.html

The link can be written as:

<a href="html/elements.html">
    HTML Elements
</a>

The / separates folders and files in the path.

You can learn more about HTML elements in HTML Elements.

Moving to the Parent Folder

The .. notation is used to move up one directory level.

Suppose your structure looks like this:

website/
    index.html
    pages/
        about.html

From about.html, you can link back to index.html using:

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

Here, .. means the parent directory.

Linking to a File in Another Folder

You can also use multiple directory levels.

website/
    index.html
    pages/
        tutorials/
            html.html

From html.html, you could link to the homepage with:

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

Each .. moves up one directory.

Relative URLs for Images

Relative URLs are frequently used with the src attribute to load images stored within the same website.

For example:

website/
    index.html
    images/
        logo.png

The image can be added using:

<img src="images/logo.png" alt="Website Logo">

Learn more about working with images in HTML Images.

Relative URLs vs Absolute URLs

The main difference is that an absolute URL contains the complete web address, while a relative URL depends on the current document’s location.

Absolute URL

<a href="https://www.example.com/about.html">
    About Us
</a>

Relative URL

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

Absolute URLs are commonly used for external websites, while relative URLs are commonly used for resources within the same website.

You can learn more about absolute URLs in HTML Absolute URLs.

Advantages of Relative URLs

Relative URLs have several advantages:

• They are shorter and easier to write.
• They are useful for internal website navigation.
• They make website development more organized.
• They can make local website testing easier.
• They do not require repeatedly writing the domain name.

Best Practices for Relative URLs

Always check the folder structure before writing a relative path. A small mistake in the path can cause a broken link or missing image.

Use ../ carefully when moving between directories, and keep your website’s folder structure organized.

Relative URLs are an important part of HTML because they allow webpages and resources within the same website to connect efficiently. Understanding relative paths makes it easier to create navigation menus, internal links, images, stylesheets, and other website resources.