What is the difference between absolute and relative URLs in HTML links and assets?
Understand absolute, root-relative, and document-relative URLs in HTML links and assets, when to use each, and how they affect portability and SEO.
Expected Interview Answer
An absolute URL specifies the full path including the scheme and domain (https://example.com/img/logo.png), while a relative URL points to a resource relative to the current document or site root (../img/logo.png or /img/logo.png).
Absolute URLs always resolve to the same location regardless of where the referencing page lives, which is required for external resources. Relative URLs are resolved by the browser against the current page's location (or a <base> tag if present), making them portable across domains and environments like local, staging, and production. Root-relative URLs start with a slash and resolve from the domain root, while document-relative URLs use paths like ./ and ../.
- Relative URLs keep a site portable across environments
- Absolute URLs are unambiguous for external resources
- Root-relative paths avoid fragile ../ chains
- Relative links survive domain changes
- Absolute URLs are needed for canonical tags, sitemaps, and sharing
AI Mentor Explanation
An absolute URL is like giving a stadium's full postal address — country, city, street — so a visiting team finds it from anywhere on earth. A relative URL is like directions shouted from inside the ground: 'the nets are two gates left of where you're standing'. Those directions only work relative to your current spot; move to another stadium and 'two gates left' points somewhere else entirely, just as a relative path resolves against the current page.
Step-by-Step Explanation
Step 1
Identify the scheme and host
If the URL starts with https:// or // and names a domain, it is absolute; it resolves the same everywhere.
Step 2
Spot root-relative paths
A leading slash (/img/logo.png) resolves from the domain root, independent of the current folder.
Step 3
Spot document-relative paths
Paths like ./file, ../file, or file resolve against the current page's directory.
Step 4
Account for the base tag
A <base href> in the head changes what relative URLs resolve against for the whole document.
Step 5
Choose per use case
Use relative/root-relative for internal links and assets; use absolute for external resources, canonicals, and shared links.
What Interviewer Expects
- Clear definition of absolute vs relative URLs
- Distinction between root-relative and document-relative
- Understanding that relative URLs resolve against the current document or base tag
- Knows when each type is appropriate (portability vs external/canonical)
- Awareness of protocol-relative URLs (//example.com)
Common Mistakes
- Thinking a leading slash means document-relative rather than root-relative
- Hardcoding absolute URLs to your own domain, breaking staging/local
- Forgetting a <base> tag can change how relative URLs resolve
- Assuming ../ chains are relative to the site root
- Using relative URLs for canonical tags or Open Graph images that require absolute
Best Answer (HR Friendly)
“An absolute URL is the full web address including the domain, so it works from anywhere. A relative URL is a shorter path that points to a file relative to the current page, which keeps a website easy to move between environments.”
Code Example
<!-- Absolute: always resolves to the same place -->
<a href="https://example.com/about">About</a>
<img src="https://cdn.example.com/logo.png" alt="Logo" />
<!-- Protocol-relative: reuses the current page's scheme -->
<script src="//cdn.example.com/lib.js"></script>
<!-- Root-relative: resolves from the domain root -->
<a href="/products">Products</a>
<img src="/assets/hero.jpg" alt="Hero" />
<!-- Document-relative: resolves from the current folder -->
<a href="./contact.html">Contact</a>
<img src="../images/icon.svg" alt="Icon" />Follow-up Questions
- What is a protocol-relative URL and why is it now discouraged?
- How does a <base> tag affect relative URL resolution?
- Why must canonical link tags use absolute URLs?
- What is the difference between /img and ../img?
- How do relative URLs help when moving a site between staging and production?
MCQ Practice
1. Which URL is root-relative?
A leading slash makes the path resolve from the domain root regardless of the current folder.
2. What does a relative URL resolve against by default?
Document-relative URLs resolve against the current page's URL, unless a <base> tag overrides it.
3. Which is the best choice for a canonical link tag?
Canonical tags should use absolute URLs so search engines resolve them unambiguously.
Flash Cards
Absolute URL — Includes scheme + host; resolves the same from anywhere (https://example.com/x).
Root-relative URL — Starts with / and resolves from the domain root.
Document-relative URL — Uses ./ or ../ and resolves from the current page's folder.
Protocol-relative URL — Starts with // and reuses the page's scheme (now discouraged).
When to use absolute — External resources, canonical tags, sitemaps, and shared/social links.
Continue Learning
Related Interview Questions
What are semantic HTML elements and why do they matter for accessibility and SEO?
easy
What is the difference between Flexbox and CSS Grid, and when should you use each?
medium
What is the difference between position relative, absolute, fixed, and sticky in CSS?
medium
How does the picture element and srcset enable responsive images?
medium