Skip to main content

Practical Exercise 18: Absolute and Relative Links

Discover the difference between absolute and relative links in HTML with this practical exercise. Learn when and how to use each type of link to build well-structured, easy-to-navigate websites.

Activity​

Create an HTML document containing absolute and relative links. For this exercise, you'll need to create two different HTML files. You can name them index.html and page.html.

Interactive Solution​

DivZone ad link Logo
AI PlatformTurn Code into Customers.Try it free

Solution with complete HTML code​

Create an index.html file with the following code.

index.html
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Enlaces Absolutos y Relativos</title>
  </head>
  <body>
    <h1>Enlace Absoluto</h1>
    <a href="https://div.zone" target="_blank">Ir a DivZone</a>

    <h2>Enlace Relativo</h2>
    <a href="page.html">Ir a Página Interna</a>
  </body>
</html>

Inside the same folder, create another file called page.html to use as an internal page.

page.html
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Enlaces Absolutos y Relativos - Página interna</title>
  </head>
  <body>
    <h1>Mi página interna de ejemplo.</h1>
  </body>
</html>

Variants of the Same Exercise​

Variant 1: Root-Relative vs Document-Relative Paths​

HTML offers several ways to write relative paths. Understanding the difference between ../, ./, and / is key to not breaking links when moving files.

index.html — located at the project root
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Path Types</title>
  </head>
  <body>
    <h1>Relative Path Comparison</h1>

    <h2>Relative to the current document</h2>
    <ul>
      <li><a href="page.html">Same folder</a></li>
      <li><a href="./page.html">Same folder (explicit)</a></li>
      <li><a href="paginas/contacto.html">Subfolder</a></li>
    </ul>

    <h2>Relative to the site root (start with /)</h2>
    <ul>
      <li><a href="/paginas/contacto.html">From root</a></li>
      <li><a href="/css/estilos.css">CSS file from root</a></li>
      <li><a href="/img/logo.png">Image from root</a></li>
    </ul>

    <h2>Going up levels (../)</h2>
    <ul>
      <li><a href="../index.html">One level up</a></li>
      <li><a href="../../proyecto/index.html">Two levels up</a></li>
    </ul>

    <h2>Absolute links</h2>
    <ul>
      <li><a href="https://div.zone" target="_blank" rel="noopener noreferrer">DivZone (HTTPS)</a></li>
      <li><a href="//cdn.ejemplo.com/lib.js">Implicit protocol</a></li>
    </ul>
  </body>
</html>
paginas/contacto.html
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Contact</title>
  </head>
  <body>
    <h1>Contact Page</h1>
    <!-- Go back with document-relative path -->
    <p><a href="../index.html">← Back to home (../)</a></p>
    <!-- Go back with root-absolute path -->
    <p><a href="/index.html">← Back to home (/)</a></p>
  </body>
</html>

Mnemonic rule:

  • ./ = "in this same folder" (optional, assumed)
  • ../ = "go up one level" (as many times as levels you want to climb)
  • / = "from the site root" (doesn't depend on where the file is)
  • // = "use the same protocol as the current page" (HTTP or HTTPS)

Variant 2: Realistic Folder Structure​

This is how a web project is normally organized. A file in a deep subfolder needs relative paths to access images, CSS, and other pages.

project/
├── index.html
├── css/
│   └── estilos.css
├── img/
│   ├── logo.png
│   └── fondo.jpg
├── paginas/
│   ├── servicios.html
│   └── contacto.html
└── blog/
    ├── index.html
    └── articulos/
        └── post-1.html
paginas/servicios.html
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Services</title>
    <!-- CSS: go up one level and into css/ -->
    <link rel="stylesheet" href="../css/estilos.css" />
  </head>
  <body>
    <h1>Services</h1>
    <!-- Navigation: go up one level to reach the index -->
    <nav>
      <a href="../index.html">Home</a> |
      <a href="contacto.html">Contact (same folder)</a> |
      <a href="../blog/index.html">Blog</a>
    </nav>

    <!-- Image: go up one level and into img/ -->
    <img src="../img/logo.png" alt="Logo" width="200" />

    <!-- Link to a specific blog post -->
    <p>
      Read our article: 
      <a href="../blog/articulos/post-1.html">Post 1</a>
    </p>
  </body>
</html>
blog/articulos/post-1.html
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Post 1</title>
    <!-- CSS: go up two levels (to root) and into css/ -->
    <link rel="stylesheet" href="../../css/estilos.css" />
  </head>
  <body>
    <h1>Blog Article</h1>
    <!-- Navigation: go up two levels -->
    <nav>
      <a href="../../index.html">Home</a> |
      <a href="../../paginas/servicios.html">Services</a> |
      <a href="../index.html">Blog</a>
    </nav>

    <!-- Image from root (easier to maintain) -->
    <img src="/img/logo.png" alt="Logo" width="200" />
  </body>
</html>

When the folder structure is deep, using root-relative paths (/img/logo.png) is more maintainable than going up multiple levels (../../../img/logo.png).

Variant 3: Using <base href=""> in the <head>​

The <base> tag defines a base URL for all relative links on the page. It's useful when your site is in a subdirectory or when you deploy to different environments.

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Base Href</title>
    <!-- All relative links resolve from this base URL -->
    <base href="https://mysite.com/my-project/" />
  </head>
  <body>
    <h1>Site with Base Href</h1>

    <!-- This relative link becomes:
         https://mysite.com/my-project/paginas/contacto.html -->
    <a href="paginas/contacto.html">Contact</a>

    <!-- This img becomes:
         https://mysite.com/my-project/img/logo.png -->
    <img src="img/logo.png" alt="Logo" width="200" />

    <!-- Absolute links IGNORE the base -->
    <a href="https://div.zone" target="_blank">DivZone (absolute)</a>
  </body>
</html>

⚠️ Caution: <base> can only appear once in the document and must be before any element that uses relative URLs. If you forget about <base> when moving files, all links will break.

Variant 4: Implicit Protocol Links (//)​

When you write //cdn.example.com/file.js without https: or http:, the browser automatically uses the same protocol as the current page.

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Implicit Protocol</title>
    <!-- If the page loads over HTTPS, this will be HTTPS.
         If it loads over HTTP, it will be HTTP. -->
    <link rel="stylesheet" href="//cdn.ejemplo.com/bootstrap.min.css" />
  </head>
  <body>
    <h1>Adaptive Protocol Resources</h1>

    <p>This site loads resources that automatically adapt to the protocol.</p>

    <!-- jQuery from CDN with implicit protocol -->
    <script src="//code.jquery.com/jquery-3.7.1.min.js"></script>

    <!-- Image from CDN -->
    <img src="//cdn.ejemplo.com/img/banner.jpg" alt="Banner" width="600" />

    <p>
      <strong>Advantage:</strong> you avoid mixed content warnings when your
      site uses HTTPS but resources are on HTTP.
    </p>
  </body>
</html>

This technique was very common before the web fully migrated to HTTPS. Today, practically all CDNs support HTTPS, so you can (and should) use https:// directly.

Best Practices and Common Mistakes​

✅ Best Practice❌ Common Mistake
Use root-relative paths (/) for shared resources (CSS, images, JS)Use complex and fragile ../../../ paths
Use ./ or ../ only for pages within the same projectUse local absolute paths (C:\Users\...) — they only work on your PC
Keep a flat folder structure (2-3 levels max)Create structures with 5+ levels of depth
Use explicit https:// for external resourcesUse http:// (mixed content blocked in HTTPS)
Add rel="noopener noreferrer" with target="_blank"Leave target="_blank" without security protection

Frequently Asked Questions (FAQ)​

Which path is more portable, absolute or relative?​

It depends on the context. Absolute paths (https://div.zone/page) are 100% portable (they work from anywhere) but tie the link to a specific domain. Root-relative paths (/pages/contact.html) are portable within the same domain (if you change the domain or move the project from /dev/ to production, they can break). Document-relative paths (../contact.html) are the most fragile but the most portable if you move the entire project folder.

Root-relative paths (/css/styles.css) depend on where the project folder is located on the server. If you open the file directly locally (file://), the root is the drive (C:/). On a server, the root is the public_html or htdocs folder. For local development, use a local server (Live Server in VS Code, npx serve, or XAMPP) instead of opening the file directly.

A broken link is an <a href="..."> that points to a URL that doesn't exist (404 error). To avoid it: 1) verify links before publishing, 2) use relative paths carefully when moving files, 3) implement 301 redirects on the server for URLs that changed, and 4) use tools like Google Search Console that automatically detect broken links.

tip

🔗 Want to know more about links and navigation? Dive deeper into HTML Elements and Tags and learn all available attributes for the <a> tag.