Andromeda
Note

Relative URLs

Definition

A Relative URL refers to the path of a resource relative to the directory position of the current document in the file system, rather than specifying the full protocol and domain.

Why It Matters

Relative URLs are essential for portability in web development. They allow developers to build and test a website on a local development server or preview it offline via file://, and then upload it to a production server on any domain name without breaking any internal links, provided the relative directory structure remains intact.

Core Concepts

  • Same Directory: A link containing just the filename (e.g., about.html) points to a resource in the same directory as the current file.
  • Lower Directory: Moving down the folder tree by specifying the folder name (e.g., recipes/salmon.html).
  • Higher Directory: Moving up the folder tree using the double-dot slash syntax (../index.html moves up one level; ../../index.html moves up two levels).
<!-- Relative URL Examples -->
<a href="contact.html">Contact (Same Folder)</a>
<a href="products/item.html">Product (Subfolder)</a>
<a href="../index.html">Home (Parent Folder)</a>
<a href="/images/logo.png">Logo (Site Root Relative)</a>
  • Site Root Relative: Paths starting with a forward slash (/images/logo.png) resolve from the root directory of the web server. They are portable across subdirectories but fail on local filesystems without a local server.

Connected Concepts

Connected notes