A relative URL points to a location relative to the current page — no protocol, no domain, just a path. It's the natural choice for links within your own site.
Syntax
<a href="/cources/data-science.php">Root-relative</a>
<a href="data-science.php">Same-directory relative</a>
<a href="../notes/index.php">Parent-directory relative</a>Basic Example
<a href="/notes/html">Back to HTML Notes</a>Browser output: a normal link — but its actual destination depends entirely on the current page's own URL to resolve correctly.
How It Works
| Form | Starts from | Example |
|---|---|---|
| Root-relative | The site's root domain, regardless of current page depth | /cources/data-science.php |
| Same-directory relative | The current page's own folder | data-science.php |
| Parent-directory relative | One level up from the current folder | ../notes/index.php |
The browser combines the relative path with the current page's own URL to work out the real destination — that resolution step is exactly what "relative" means.
Important Attributes
| Attribute | Purpose |
|---|---|
href | Holds the relative path string — again, a URL format concept rather than a special attribute |
Real-World Example
<nav>
<a href="/">Home</a>
<a href="/cources">Courses</a>
<a href="/notes">Notes</a>
</nav>A root-relative navigation menu — these three links work identically no matter which page of the site they're placed on, because they always start from the domain root.
Comparison: absolute URL vs relative URL (quick recap)
Relative URLs are shorter and automatically correct when a site changes domains (staging → production, or a custom domain change) since no domain is hardcoded. Full comparison table: Absolute URL.
Common Mistakes
- Using same-directory relative paths (
data-science.php) in a shared component like a header or footer that gets included on pages at different folder depths — the same relative path resolves to a different, often broken, location depending on where the page lives - Miscounting
../levels needed to reach a parent folder
Best Practices
- Prefer root-relative paths (starting with
/) for site-wide navigation and shared components — they resolve identically regardless of the current page's folder depth - Reserve same-directory/parent-relative paths for links between pages you know will always stay at that fixed relative position to each other
Accessibility Considerations
No direct accessibility impact — this is purely about how the browser resolves the destination.
SEO Considerations
Search engines resolve relative URLs correctly during crawling in almost all cases, but consistently broken relative paths (from the mistake above) create real 404 errors that do hurt both users and crawl efficiency.
Browser & Modern HTML Notes
The <base> element can change what a page's relative URLs resolve against — rarely used, but worth knowing it exists if relative links on a page behave unexpectedly.
Mini Practice
- Write a root-relative link to your site's homepage.
- From a page at
/blog/posts/my-post.html, write a relative link back to/blog/index.htmlusing../.
