What is the difference between a relative and absolute URL?

Links and images are two of the most common resources you will add to your web pages. It is therefore essential to know how to treat them correctly.


Every website needs to reference certain resources, be it 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 a relative or absolute URL. This applies to both local files on a computer and protocol-based URLs accessible on the web.


How to use an absolute URL path

An absolute URL contains the full 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 often these begin 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 trying to access. This is necessary if you are linking to an external site.

  1. Create a simple HTML website by creating a new folder and adding two new files called index.html and styles.css.
  2. In index.htmladd 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>
  3. In styles.cssadd style to webpage.
    body {
    font-family: Arial, Helvetica, sans-serif;
    }

    .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    }

    .mb28 {
    margin-bottom: 28px;
    }

  4. In index.htmladd a tag inside the container div and add the absolute URL of the main Google site (https://www.google.com).
    <a href="https://www.google.com" class="mb28">Google.com</a>
  5. You can also access images online using the full absolute path to the stored file. You can also take additional steps to ensure that you have added responsive images to your HTML Web page.
    <img  data-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">
  6. Click on the index.html file to open it in a browser and view the recovered image from its external location.
    Absolute bird image URL
  7. From the root folder of your website, create a new folder to store images, called Pictures. Inside the folder, add a new image and give it a name, such as CuteBird.jpg.
    New bird photo stored in file manager
  8. Identify the absolute path to the image file you just added. You can do this by finding it in the navigation path of your operating system’s file manager application. You will also need to add the file name to the end of the path. For example, “C:UsersSharlDesktopWebsiteImagesCuteBird.jpg”
    Find absolute path in file manager
  9. In index.htmlreplace 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 file system resource. On Unix and macOS, you can then add the absolute path you identified in the previous step. On Windows you will need to replace backslashes with slashes and add an extra slash before the drive letter, for example:
    Cute bird photo
  10. Click on the index.html file to open it in a browser and view the image stored on your computer.
    Absolute URL used to display the bird image

How to use a relative URL path

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

HTML CSS Folder Path Structure

In the example above, to access Logo.ico of 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 on the web, instead of using the full link such as “https://example.com/about”, you can use relative routing instead:

  • /on
  • /Contact
  • /projects/local-clients

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

  1. Inside the root of your website directory, create a new folder called pages.
  2. In the new Pages folder, create a new file called Bird1.html.
  3. Populate Bird1.html with the 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>
  4. Inside the div container, add an image tag and use a relative url to link to the CuteBird.jpg image.
    <img  data-src="../Images/CuteBird.jpg" alt="Cute bird photo" class="mb28" width="900" height="700">
  5. In the index.html file, delete the existing content inside the container div. Replace it with one a tag that uses a relative link to open the Bird1.html case.
    <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>
  6. Click on the index.html file to open it in a browser, then click the new link to go to Bird1.html.
    Relative URL used to display the bird image

You can now determine the difference between absolute and relative URLs. You can now take extra precautions to ensure that your resources are always fetched.

You should also always ensure that any links your users may access are safe and secure.

Comments are closed.