Absolute vs relative URLs in HTML - When to Use Which

The Big Idea

Discover how a small change in writing links can save you hours of fixing broken pages!

The Scenario

Imagine you are building a website with many pages and links. You write each link by typing the full web address every time, like https://example.com/about.html for the About page.

The Problem

This is slow and risky because if your website address changes or you move files around, you must update every single link manually. It's easy to make mistakes and break links, causing frustration for visitors.

The Solution

Using absolute and relative URLs helps you write links smarter. Absolute URLs give the full address, while relative URLs describe the link location based on the current page. This way, you can move files or change domains without rewriting all links.

Before vs After

✗ Before

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

✓ After

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

What It Enables

This makes your website easier to maintain and more flexible to changes, saving time and avoiding broken links.

Real Life Example

When you move your website from a test server to the live internet, relative URLs keep all your links working without any edits.

Key Takeaways

Writing full web addresses for every link is slow and error-prone.

Absolute URLs use full addresses; relative URLs use paths based on current page.

Using them properly keeps your website links working even if you move files or change domains.