Home » Absolute vs Relative URLs in HTML

Absolute vs Relative URLs in HTML – A Complete Beginner’s Guide

Introduction

When creating links in HTML, one of the first concepts you’ll encounter is the difference between absolute URLs and relative URLs.

Every website contains links. These links connect pages, images, stylesheets, videos, and other resources. Understanding how URLs work is an essential part of learning HTML and web development.

Many beginners get confused about when to use an absolute URL and when to use a relative URL. The good news is that the concept is simple once you understand how browsers locate files.

In this guide, you’ll learn everything about absolute vs relative URLs in HTML, including syntax, examples, advantages, disadvantages, and best practices.

👉 Learn HTML basics here:
https://w3htmlschool.com/html/

👉 Learn HTML document structure here:
https://w3htmlschool.com/html-document-structure-guide-examples-best-practices/

What Is a URL in HTML?

A URL (Uniform Resource Locator) is the address of a resource on the web.

Example:


What is a URL in HTML?

A URL (Uniform Resource Locator) is the address used to locate a webpage, image, file, or resource on the internet.

A URL tells the browser where to find a resource.

Examples:

https://www.example.com/images/logo.png

In HTML, URLs are commonly used in:

  • <a href="">

  • <img src="">

  • <link href="">

  • <script src="">

Two Types of URLs in HTML

HTML supports two main types of URLs:

  1. Absolute URL

  2. Relative URL

Let’s understand each one clearly.

What Is an Absolute URL?

What is an Absolute URL?

An absolute URL contains the complete web address including protocol, domain name, and resource path.

An absolute URL provides the complete location of a resource.

It includes:

  • Protocol (https://)
  • Domain name
  • Folder path
  • File name

Structure of an Absolute URL

https://www.example.com/folder/page.html

Example 1: Absolute URL in Anchor Tag

<a href="https://www.google.com">Visit Google</a>

Explanation

  • Browser knows exactly where to go

  • Works from any webpage, anywhere

Example 2: Absolute URL for Image

<img src="https://www.example.com/images/logo.png" alt="Logo">

Advantages of Absolute URLs

  • Works across different websites
  •  Clear and unambiguous
  •  Useful for external links
  •  Preferred in canonical URLs

Disadvantages of Absolute URLs

  • Longer and less readable
  •  Harder to maintain in large projects
  • Not portable (domain-specific)

How It Works

The browser knows exactly where the resource exists because the entire address is provided.

No matter where the current webpage is located, the browser can find the destination.

What Is a Relative URL?

What is a Relative URL?

A relative URL specifies a resource location relative to the current webpage without including the domain name.

A relative URL gives the address of a resource relative to the current page location.

 It does not include the domain name or protocol.

Example Folder Structure

/website
 ├── index.html
 ├── about.html
 ├── images/
 │    └── logo.png
 └── css/
      └── style.css

Example 3: Relative URL in Anchor Tag

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

Explanation

  • Browser looks for about.html in the same folder

Example 4: Relative URL for Image

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

Types of Relative URLs

1. Same Folder

 
<a href="contact.html">Contact</a>

2. Child Folder

 
<img src="images/photo.jpg">

3. Parent Folder (../)

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

../ means “go up one directory”.

4. Root-Relative URL

Starts from the root of the website.

 
<link rel="stylesheet" href="/css/style.css">
  • Very popular
  • Stable for large websites

Absolute URL vs Relative URL (Comparison Table)

What is the difference between absolute and relative URLs?
An absolute URL contains the complete web address, while a relative URL contains only the path relative to the current page.

FeatureAbsolute URLRelative URL
Includes domain YesNo
Portability LowHigh
LengthLongShort
External linking Best Not suitable
Internal linkingLess used Preferred
MaintenanceHarderEasier

Which One Should You Use?

Use Absolute URLs When:

  • Linking to external websites

  • Defining canonical URLs

  • Sharing content outside your site

Example:

<a href="https://developer.mozilla.org">MDN Docs</a>

Use Relative URLs When:

  • Linking internal pages

  • Loading images, CSS, and JS

  • Building portable websites

Example:

<link rel="stylesheet" href="css/style.css">
 

Absolute URL Examples

Example 1: External Website

<a href="https://www.wikipedia.org">
  Wikipedia
</a>

Example 2: External Image

<img src="https://example.com/images/logo.png">

Example 3: External CSS File

<link rel="stylesheet"
href="https://cdn.example.com/style.css">

Relative URL Examples

Example 1: Same Folder

<a href="contact.html">
  Contact
</a>

Folder Structure:

website/
├── index.html
├── contact.html

Example 2: Inside a Folder

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

Folder Structure:

website/
├── index.html
└── pages/
    └── about.html

Example 3: Going Back One Folder

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

Folder Structure:

website/
├── index.html
└── pages/
    └── about.html

Understanding Relative Path Symbols

Relative URLs often use special symbols.

Current Folder (./)

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

Means:

“Look in the current folder.”

Parent Folder (../)

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

Means:

“Go up one folder level.”

Two Levels Up

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

Means:

“Go up two folder levels.”

When Should You Use Absolute URLs?

Use absolute URLs when:

✔ Linking to another website

<a href="https://www.github.com">

✔ Referencing external resources

<link href="https://cdn.example.com/style.css">

✔ Sharing URLs publicly

Absolute URLs work from anywhere.

When Should You Use Relative URLs?

Use relative URLs when:

✔ Linking pages within your website

✔ Referencing local images

✔ Connecting local CSS files

✔ Building maintainable websites

Advantages of Absolute URLs

✔ Always Clear

The complete path is provided.

✔ Good for External Resources

Perfect for third-party websites.

✔ Works Anywhere

No dependency on current page location.

Disadvantages of Absolute URLs

Longer URLs

More typing required.

Harder Site Migration

Domain changes require updates.

Less Flexible

Not ideal for internal navigation.

Advantages of Relative URLs

✔ Shorter Links

Cleaner code.

✔ Easier Site Migration

No need to change domains.

✔ Better Internal Navigation

Perfect for website pages.

Disadvantages of Relative URLs

Can Break Easily

Incorrect folder structure causes errors.

Not Suitable for External Links

Requires current domain context.

Real-World Example

Imagine a website:

mywebsite/
│
├── index.html
├── about.html
├── contact.html
│
└── images/
    └── logo.png

Relative Links

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

<a href="contact.html">Contact</a>

<img src="images/logo.png">

Absolute Links

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

<img src="https://mywebsite.com/images/logo.png">

Most developers use relative URLs for internal resources.

SEO Considerations

Do Absolute and Relative URLs Affect SEO?

Not directly.

Search engines can understand both.

However, consistency matters.

SEO Best Practices

✔ Use relative URLs for internal pages

✔ Use absolute URLs for canonical tags

✔ Avoid broken links

✔ Maintain clean site structure

Best Practices

Use Relative URLs for Internal Links

Makes maintenance easier.

Use Absolute URLs for External Links

Ensures reliability.

Keep Folder Structure Organized

Avoid broken paths.

Test Every Link

Broken links hurt user experience.

Common Mistakes

Mixing Paths Incorrectly

<a href=“/about.html”>

 

without understanding root paths.

Wrong Folder References

../folder/file.html

 

when folder structure is incorrect.

Using Absolute URLs Everywhere

Makes migration difficult.

FAQs

1. What is an absolute URL?

An absolute URL contains the complete web address including protocol and domain name.

2. What is a relative URL?

A relative URL specifies a location relative to the current webpage.

3. Which is better for internal links?

Relative URLs are generally recommended.

4. Can relative URLs be used for external websites?

No. External websites require absolute URLs.

5. Do absolute and relative URLs affect SEO?

Not directly, but proper usage improves site structure and maintenance.

Understanding absolute vs relative URLs in HTML is a fundamental skill for every web developer.

Remember these simple rules:

  • Use absolute URLs for external websites and resources.
  • Use relative URLs for pages and files within your own website.
  • Keep your folder structure organized.
  • Test links regularly.

As you continue your HTML CSS JavaScript learning path, mastering URLs will help you build websites that are easier to maintain, navigate, and scale.

 Continue learning HTML here:
https://w3htmlschool.com/html/

 Explore more HTML tags and attributes:
https://w3htmlschool.com/html-tags-and-attributes-complete-guide-with-examples/

Scroll to Top