What Is the Difference Between a Relative and Absolute URL?

Every website needs to reference certain resources, whether they're images, files, or other web pages. Deciding how to link to other files is extremely important to ensure that browsers locate them correctly.

You can link to resources using either a relative or absolute URL. This applies to both local files on a computer and protocol-based URLs accessed over the web.

How to Use an Absolute URL Path

An absolute URL contains the entire path to a particular file location. Examples of these include the full path to files on your computer:

file:///C:/Users/Sharl/Desktop/test.html
file:///C:/Users/John/Documents/Work/Q4Summary.docx
file:///C:/Users/Mark/Documents/Music/Recording.mp3

Another example includes a full protocol URL, which you can use to identify a resource to send over the internet. Most commonly, these start with "https" or "http":

https://www.google.com
https://calendar.google.com/calendar
https://www.airbnb.com.au/rooms

The absolute URL contains all the information required to locate the file or resource you are attempting to access. This is required if you are linking to an external site.

Build a simple website in HTML by creating a new folder and adding two new files called index.html and styles.css.

In index.html, add some HTML code to create a basic website:

        <!DOCTYPE html>
<html lang="en">
    <head>
        <title> My Website </title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" >
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div class="container">
            <h1> My Website </h1>
            <p> Welcome to my website. </p>
        </div>
    </body>
</html>

In styles.css, add some styling to the webpage.

        body {
    font-family: Arial, Helvetica, sans-serif;
}
 
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
 
.mb28 {
    margin-bottom: 28px;
}

In index.html, add an <a> tag inside the container div, and add the absolute URL to Google's main site (https://www.google.com).
```
        <a href="https://www.google.com" class="mb28">Google.com</a>
    
```

You can also access images online using the full absolute path to the stored file. You can also take extra steps to ensure that you have added responsive images to your HTML webpage.

        <img src="https://images.unsplash.com/photo-1583768138297-718a9cc5b746?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3870&q=80" alt="Cute bird photo" class="mb28" width="900" height="600">

Click on the index.html file to open it in a browser and view the image retrieved from its external location.
From the root folder of your website, create a new folder to store images, called Images. Inside the folder, add a new image and give it a name, such as CuteBird.jpg.
Identify the absolute path to the image file you have just added. You can do this by finding it in the navigation path of your operating system's file manager app. You will also need to add the file name to the end of the path. For example, "C:\Users\Sharl\Desktop\Website\Images\CuteBird.jpg"
In index.html, replace your image tag with a new image that uses the absolute path pointing to the CuteBird.jpg file stored on your computer. Remember to add the file:// prefix to indicate a local filesystem resource. On Unix and macOS, you can then append the absolute path you identified in the previous step. On Windows, you'll need to replace backslashes with forward slashes and add an extra forward slash before the drive letter, for example:
```
<img src="file:///C:/Users/Sharl/Desktop/Website/Images/CuteBird.jpg" alt="Cute bird photo" class="mb28" width="900" height="700">
```
Click on the index.html file to open it in a browser and view the image stored on your computer.

How to Use a Relative URL Path

A relative URL only stores part of the URL or path, and is usually relative to the location of the current file or section of a website.

In the above example, to access Logo.ico from index.html using a relative URL, you would use the path "Images/Icons/Logo.ico". Other examples include:

Pages/Bird1.html
Images/CuteBird.jpg
styles.css

When you use the same folder structure on another computer, the website will still be able to retrieve the file. When routing over the web, instead of using the full link such as "https://example.com/about", you can use relative routing instead:

/about
/contact
/projects/local-clients

You can use a relative URL to create links or reference images inside your HTML web page.

Inside the root of your website directory, create a new folder called Pages.
Inside the new Pages folder, create a new file called Bird1.html.

Populate Bird1.html with HTML code to create the page.

        <!DOCTYPE html>
<html lang="en">
    <head>
        <title> Bird 1 </title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" >
        <link rel="stylesheet" href="../styles.css" />
    </head>
    <body>
        <div class="container">
            <h1> Coffee </h1>
            <p> Coffee is a sweet bird who loves to game! </p>
        </div>
    </body>
</html>

Inside the container div, add an image tag, and use a relative URL to link to the CuteBird.jpg image.

        <img src="../Images/CuteBird.jpg" alt="Cute bird photo" class="mb28" width="900" height="700">

In the index.html file, remove the existing content inside the container div. Replace it with a single a tag that uses a relative link to open the Bird1.html file.

        <div class="container">
    <h1> My Website </h1>
    <p> Welcome to my website. </p>
    <a href="Pages/Bird1.html" class="mb28">Bird 1: Coffee</a>
</div>