0
0
HTMLmarkup~5 mins

Absolute vs relative URLs in HTML

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

URLs tell the browser where to find files like web pages or images. Absolute and relative URLs help link to these files in different ways.

When linking to a website or file on a different domain, use an absolute URL.
When linking to a file within the same website folder, use a relative URL.
When moving your website to a new domain but keeping the same folder structure, relative URLs make updates easier.
When sharing a link that should always go to the exact same place, use an absolute URL.
When organizing files inside your website and linking between them, use relative URLs.
Syntax
HTML
Absolute URL example:
<a href="https://example.com/page.html">Link</a>

Relative URL example:
<a href="page.html">Link</a>

An absolute URL includes the full web address starting with http:// or https://.

A relative URL points to a file based on the current page's location, without the full address.

Examples
This is an absolute URL linking to Google's homepage.
HTML
<a href="https://www.google.com">Google</a>
This is a relative URL linking to a file named about.html in the same folder.
HTML
<a href="about.html">About Us</a>
This relative URL goes up one folder and then to contact.html.
HTML
<a href="../contact.html">Contact</a>
This relative URL starts from the website root folder to find the logo image.
HTML
<a href="/images/logo.png">Logo</a>
Sample Program

This page shows two links: one uses an absolute URL to go to Google, the other uses a relative URL to go to an About page in the same folder.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Absolute vs Relative URLs</title>
</head>
<body>
  <h1>Links with Absolute and Relative URLs</h1>
  <p>Absolute URL link to Google:</p>
  <a href="https://www.google.com" target="_blank" rel="noopener noreferrer">Go to Google</a>
  <p>Relative URL link to About page (assumed in same folder):</p>
  <a href="about.html">About Us</a>
</body>
</html>
OutputSuccess
Important Notes

Absolute URLs are best when linking outside your website.

Relative URLs keep your links working if you move your site to a new domain.

Use target="_blank" and rel="noopener noreferrer" for safe new tab links.

Summary

Absolute URLs include the full web address and work anywhere.

Relative URLs depend on the current page location and are good for internal links.

Choosing the right URL type helps keep your website links working well.