What is a relative link?

Brief Answer

A relative link is a link that specifies the path to a file relative to the current page location:

Current folder — page.html 📁
Subfolder — folder/page.html 📂
Parent folder — ../page.html ⬆️
Site root — /page.html 🏠
Page anchor — #section ⚓
Current page — ?param=value 🔗

<!-- Main types of relative links -->
<a href="about.html">About</a>
<a href="pages/contact.html">Contact</a>
<a href="../index.html">Home</a>
<a href="/products.html">Products</a>

Full Answer

Relative links are like giving directions: “go straight”, “turn left” instead of a full address! They specify the path relative to the current location. 🧭

Relative link syntax

<!-- Relative link -->
<a href="relative/path">Link</a>
 
<!-- Absolute link for comparison -->
<a href="https://example.com/full/path">Link</a>

1. File in the same folder

Simply specify the filename:

<!-- Folder structure:
     /current-folder/
       ├── index.html (current page)
       └── about.html
-->
 
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
<a href="services.html">Services</a>

2. File in subfolder

Specify folder and file with slash:

<!-- Folder structure:
     /current-folder/
       ├── index.html (current page)
       └── pages/
           ├── about.html
           └── contact.html
-->
 
<a href="pages/about.html">About</a>
<a href="images/photo.jpg">Photo</a>
<a href="css/style.css">Styles</a>

3. File in parent folder

Use ../ to go up one level:

<!-- Folder structure:
     /root/
       ├── index.html
       └── subfolder/
           └── page.html (current page)
-->
 
<a href="../index.html">Home</a>
<a href="../about.html">About</a>
<a href="../../other.html">Two levels up</a>

4. Absolute path from root

Start with / for path from site root:

<!-- Always from site root -->
<a href="/index.html">Home</a>
<a href="/products/catalog.html">Catalog</a>
<a href="/images/logo.png">Logo</a>

5. Anchors and fragments

Links to page sections:

<!-- On current page -->
<a href="#header">To header</a>
<a href="#footer">To footer</a>
 
<!-- On another page -->
<a href="about.html#team">Team</a>
<a href="../contact.html#form">Form</a>

6. Query parameters

Add parameters to links:

<!-- Parameters for current page -->
<a href="?category=books">Books</a>
<a href="?sort=price&order=asc">By price</a>
 
<!-- Parameters for another page -->
<a href="catalog.html?page=2">Page 2</a>

Practical examples

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/products">Products</a>
  <a href="/contact">Contact</a>
</nav>

Breadcrumbs

<div class="breadcrumbs">
  <a href="/">Home</a> /
  <a href="../catalog.html">Catalog</a> /
  <span>Product</span>
</div>

Image gallery

<div class="gallery">
  <img src="images/photo1.jpg" alt="Photo 1">
  <img src="images/photo2.jpg" alt="Photo 2">
  <img src="../shared/logo.png" alt="Logo">
</div>

Resource linking

<head>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="../shared/common.css">
  <script src="js/script.js"></script>
</head>

Differences from absolute links

Relative	Absolute
`about.html`	`https://site.com/about.html`
`../index.html`	`https://site.com/index.html`
`/products`	`https://site.com/products`
Depend on current path	Full address

Advantages of relative links

Portability — site works on any domain 🌐
Simplicity — shorter than absolute links ✂️
Flexibility — easy to move files 📦
Speed — browser doesn’t look up domain 🚀

<!-- Portable - works everywhere -->
<a href="contact.html">Contact</a>
 
<!-- Domain-bound -->
<a href="https://mysite.com/contact.html">Contact</a>

Disadvantages of relative links

Structure dependency — break when moved 💔
Debugging complexity — harder to find errors 🐛
Deep structure confusion — many ../ 🌀

Best practices

Use from root for main navigation 🏠
Relative paths for related files 📁
Check links when changing structure ✅
Document folder structure 📋

<!-- Good: main navigation from root -->
<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>
 
<!-- Good: related files relatively -->
<link rel="stylesheet" href="css/page.css">
<img src="images/banner.jpg" alt="Banner">

Common mistakes

❌ Wrong:

<!-- Extra slash at start -->
<a href="/folder//page.html">Link</a>
 
<!-- Wrong number of ../ -->
<a href="../../folder/page.html">Link</a>

✅ Correct:

<a href="/folder/page.html">Link</a>
<a href="../folder/page.html">Link</a>

Checking tools

HTML Validator — checks link correctness 🔍
Developer Tools — show 404 errors 🛠️
Linters — automatic checking 🤖

Conclusion

Relative links are the foundation of HTML navigation:

Current folder — file.html
Subfolder — folder/file.html
Parent folder — ../file.html
From root — /file.html

Use them to create flexible and portable site structure! 🎯