Absolute vs Relative URLs
Understand the difference between absolute and relative paths.
Absolute vs Relative URLs is a free HTML Academy lesson on CoddyKit. This is lesson 2 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, and your progress syncs across the web and the CoddyKit app. The HTML Academy course includes 4 lessons in total.
What Is a URL?
A URL (Uniform Resource Locator) is the full address of a resource on the web.
A URL has these parts:
https://example.com:443/products/widget?color=red#reviews
│ │ │ │ │ │
│ │ │ │ │ └─ Fragment
│ │ │ │ └─ Query string
│ │ │ └─ Path
│ │ └─ Port
│ └─ Domain
└─ ProtocolAbsolute URLs
An absolute URL contains the full address — protocol, domain, and path:
<a href="https://example.com/about">About</a>
<img src="https://cdn.example.com/logo.png" alt="Logo">
<!-- Absolute URLs work from anywhere -->
<!-- Use for: external sites, CDN resources, canonical tags -->Relative URLs
A relative URL is relative to the current page location — no protocol or domain needed:
<!-- Current page: https://example.com/blog/post.html -->
<a href="other-post.html">Same folder</a>
<!-- → https://example.com/blog/other-post.html -->
<a href="../products">Parent folder</a>
<!-- → https://example.com/products -->
<a href="/contact">Root relative</a>
<!-- → https://example.com/contact -->Three Types of Relative URLs
Relative URLs have three forms:
<!-- 1. Relative to current file's folder -->
<a href="page.html">Same directory</a>
<!-- 2. Root-relative: starts with / (relative to domain root) -->
<a href="/about">Root-relative</a>
<!-- 3. Protocol-relative: starts with // -->
<img src="//cdn.example.com/img.png" alt="">Navigating with ../ --
Use ../ to go up one directory level:
<!-- File structure:
/
├── index.html
├── about.html
└── blog/
├── post1.html
└── post2.html
-->
<!-- In blog/post1.html: -->
<a href="post2.html">Post 2</a> <!-- same folder -->
<a href="../">Home</a> <!-- up one level -->
<a href="../about.html">About</a> <!-- up then file -->When to Use Absolute vs Relative
Guideline:
- External resources — always absolute:
https://... - CDN resources — absolute or protocol-relative
- Internal navigation — root-relative (
/page) is safest - Same directory — relative (
page.html) is convenient
Root-Relative Is Portable
Root-relative URLs (/path) survive page moves:
<!-- If this page moves from /blog/post.html to /articles/post.html -->
<!-- Root-relative STILL works: -->
<a href="/contact">Contact</a> <!-- always → example.com/contact -->
<!-- Relative MAY break: -->
<a href="../contact.html">Contact</a> <!-- different result in new location -->The base Element
The <base> element in <head> sets the base URL for all relative links:
<head>
<base href="https://example.com/docs/">
</head>
<body>
<!-- This resolves to: https://example.com/docs/guide.html -->
<a href="guide.html">Guide</a>
</body>URL Encoding
Special characters in URLs must be percent-encoded:
<!-- Space in URL path -->
<a href="/pages/my%20page.html">My Page</a>
<!-- Query string with special characters -->
<a href="/search?q=HTML%20%26%20CSS">Search HTML & CSS</a>
<!-- Common encodings:
space → %20
& → %26
= → %3D
# → %23
-->Canonical URLs
When a page can be reached at multiple URLs, use a canonical tag to declare the preferred one:
<head>
<!-- Prevents duplicate content SEO penalty -->
<link rel="canonical" href="https://example.com/blog/post">
</head>
<!-- Both /blog/post and /blog/post.html may serve the same content -->
<!-- Canonical tells Google which URL to index -->URL Best Practices
Follow these URL conventions:
- Lowercase letters only
- Use hyphens (not underscores) to separate words
- Keep URLs short and descriptive
- Avoid special characters — encode them
- Use root-relative for internal links
Quick Check
You have a file at /blog/post.html and want to link to /about.html. Which is the safest relative URL?
Recap: Absolute vs Relative URLs
URL types summary:
- Absolute — full URL including protocol and domain
- Root-relative — starts with
/, relative to domain root - Relative — relative to current file's location
../— go up one directory level<base href>— sets base for all relative URLs
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 40
- Lessons
- 159
Frequently Asked Questions
Is the “Absolute vs Relative URLs” lesson free?
Yes — any 3 lessons of the HTML Academy learning path, including “Absolute vs Relative URLs”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The HTML Academy course includes 4 lessons in total.
What will I learn in “Absolute vs Relative URLs”?
Understand the difference between absolute and relative paths. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML Academy?
No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.
How long does the “Absolute vs Relative URLs” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML Academy lesson?
Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- The anchor Element and href Attribute
- Absolute vs Relative URLs
- Opening Links in New Tabs and Download Attribute
- Linking to Sections Fragment Identifiers