Understanding Absolute vs Relative URLs

Understanding Absolute vs Relative URLs (For Total Beginners)

When you click a link on a website, your browser needs to know where to go. That “where” is usually written as a URL — a web address.

In this article, you’ll learn the difference between absolute URLs and relative URLs, see where they’re used in real pages, and practice writing them yourself. No coding experience is required — we’ll go step by step with simple examples.

By the end, you’ll be able to:

Recognize absolute vs relative URLs
Decide which one to use in common situations
Write working links and image paths in basic HTML

What is a URL, in simple terms?

A URL (Uniform Resource Locator) is just the address of something on the internet.

For example:

https://www.google.com
https://example.com/about.html
https://example.com/images/logo.png

You type URLs into your browser’s address bar, or you get to them by clicking links.

When building web pages, you often need to point to:

Other pages (links)
Images
Stylesheets (CSS files)
Scripts (JavaScript files)

To do that, you use either an absolute URL or a relative URL.

Absolute URLs: The full street address

An absolute URL is like writing a full street address, including country, city, and house number.

Example of an absolute URL:

https://example.com/about.html

It usually includes:

The protocol: http:// or https://
The domain name: example.com
(Optional) A path to a specific file or page: /about.html, /blog/post-1, etc.

If you give the browser an absolute URL, it doesn’t matter where you currently are on the web — it can always find that exact address.

Example 1: A simple link with an absolute URL

Here’s a basic HTML page that links to another website using an absolute URL.

<!DOCTYPE html>
<html>
  <head>
    <title>Absolute URL Example</title>
  </head>
  <body>
    <!-- A link to another website using an absolute URL -->
    <a href="https://www.wikipedia.org">Go to Wikipedia</a>
  </body>
</html>

What’s happening here?

<a> creates a link (the "anchor" tag).
href is the destination.
https://www.wikipedia.org is an absolute URL. Your browser knows exactly where to go from anywhere.

Expected result: When you open this page in a browser and click “Go to Wikipedia”, you’ll be taken to the Wikipedia homepage.

Relative URLs: Shortcuts based on where you are

A relative URL is like saying “the house next door” instead of writing the full street address.

It depends on where you currently are. In web terms, it depends on the current page’s location.

Some examples of relative URLs:

about.html
images/logo.png
../index.html

These don’t include https:// or a domain name. The browser figures them out based on the current page’s URL.

Why use relative URLs?

Relative URLs are very handy when:

All your pages are on the same website
You want to move the site later (for example, from example.com to mynewsite.com) without changing every single link

Understanding folders and paths (with a simple example)

Imagine your website files are inside a folder called my-website on your computer:

my-website/
├── index.html
├── about.html
└── images/
    └── logo.png

index.html is your homepage.
about.html is your About page.
images/logo.png is your logo image.

Now we’ll see how to use relative and absolute URLs with this structure.

Example 2: Relative links between two pages

Let’s link from index.html (home) to about.html (about page) using a relative URL.

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Home Page</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>

    <!-- Link to about.html in the same folder -->
    <a href="about.html">About Me</a>
  </body>
</html>

What’s happening here?

index.html and about.html are in the same folder.
We use the relative URL about.html.
The browser thinks: “From index.html, look in the same folder for about.html.”

Expected result: If you open index.html in a browser and click “About Me”, it will open about.html from the same folder.

Try it yourself:

Create a folder on your computer, e.g., my-website.

Inside, create index.html and about.html files with the code above (for now, about.html can just say About page).

Double-click index.html to open it in your browser.

Click the “About Me” link and see what happens.

You’ve just used a relative URL successfully.

Example 3: Adding an image with a relative URL

Now let’s show an image using a relative URL.

We’ll use this file structure again:

my-website/
├── index.html
└── images/
    └── logo.png

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Image Example</title>
  </head>
  <body>
    <h1>My Logo</h1>

    <!-- Display logo.png from the images folder -->
    <img src="images/logo.png" alt="My website logo">
  </body>
</html>

What’s happening here?

<img> displays an image.
src is the source of the image.
images/logo.png is a relative URL:
- Start from the current file (index.html).
- Go into the images folder.
- Load logo.png.

Expected result: When you open index.html, you should see your logo image under the “My Logo” heading.

If your image doesn’t show:

Check that the images folder is spelled correctly.
Make sure the image file is really called logo.png and is inside images/.

Example 4: When to use absolute vs relative in real life

Let’s combine what you’ve learned into a slightly more complete page.

We’ll create a page that:

Uses a relative URL to link to another page on the same site
Uses a relative URL to load a local image
Uses an absolute URL to link to an external website

Assume this structure:

my-website/
├── index.html
├── about.html
└── images/
    └── logo.png

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>My Simple Site</title>
  </head>
  <body>
    <h1>Welcome!</h1>

    <!-- Local logo image (relative URL) -->
    <img src="images/logo.png" alt="Site logo" width="150">

    <!-- Link to About page on the same site (relative URL) -->
    <p>
      <a href="about.html">Learn more about this site</a>
    </p>

    <!-- Link to an external site (absolute URL) -->
    <p>
      <a href="https://developer.mozilla.org/" target="_blank">
        Learn more HTML on MDN
      </a>
    </p>
  </body>
</html>

What’s happening here?

images/logo.png → relative URL (image in your project)
about.html → relative URL (page in the same folder)
https://developer.mozilla.org/ → absolute URL (a completely different website)

Expected result:

You see your logo.
“Learn more about this site” takes you to about.html in the same folder.
“Learn more HTML on MDN” opens the MDN site in a new tab (target="_blank").

Try it yourself:

Change about.html to contact.html and update the link in index.html to match.

See what happens if you forget to update the link — you’ll get a broken link. This is a common mistake, and practicing it helps you learn.

When should you use each type?

Here’s a simple rule of thumb:

Use absolute URLs when:

Linking to a different website
Creating links you might copy/paste outside your site (e.g., in emails, social media)

Examples:

https://twitter.com/
https://myportfolio.com/projects.html

Use relative URLs when:

Linking to pages, images, or files on the same website
You want to move your whole site later without fixing every link

Examples:

about.html
blog/post-1.html
images/photo.jpg

Common beginner mistakes (and how to avoid them)

Forgetting the protocol in an absolute URL
- Wrong: www.google.com
- Right: https://www.google.com
Using the wrong path in a relative URL
- If the image is in images/logo.png but you write logo.png, the browser won’t find it.
Mixing slashes
- Always use forward slashes (/) in URLs, even on Windows.
- Use images/logo.png, not images\logo.png.
Assuming the browser will guess
- Browsers are strict. If the file name is About.html and you write about.html, it may not work (especially on some servers).

Quick recap: Key takeaways

A URL is just a web address.
An absolute URL includes everything: protocol + domain + path (e.g., https://example.com/about.html). It works from anywhere.
A relative URL is shorter and depends on the current page’s location (e.g., about.html, images/logo.png).
Use absolute URLs for other websites; use relative URLs for links and images inside your own site.
Practice by creating small HTML files and linking them together — every working link is a win.

Learning this may feel like a lot at first, but you’ve already taken important steps toward understanding how websites are wired together. Keep experimenting, break things, fix them, and you’ll grow more confident with every link you create.

Mudzinga