Every link to an image, stylesheet, script, or another page uses a path — a string that tells the browser where to find the resource. Understanding absolute and relative paths prevents broken links and makes your site portable across environments.

Absolute Paths

An absolute path includes the full URL — protocol, domain, and path. The browser fetches the resource from that exact location regardless of where the current page is hosted.

  <!-- External image -->
<img src="https://example.com/images/logo.png" alt="Example logo">

<!-- External stylesheet -->
<link rel="stylesheet" href="https://cdn.example.com/css/main.css">

<!-- Link to another site -->
<a href="https://docs.example.com/guide">Documentation</a>

Use absolute paths when:

  • Linking to external websites or CDNs
  • Generating canonical URLs or Open Graph meta tags
  • Sending email links that must work from any context
  <meta property="og:image" content="https://example.com/images/share.jpg">

Relative Paths

A relative path locates a resource relative to the current document’s URL. If you move the entire site to a new domain, relative links still work without modification.

Same Directory

Current page: https://example.com/products/index.html

  <img src="phone.jpg" alt="Phone product">
<a href="details.html">View details</a>

Resolves to https://example.com/products/phone.jpg

Subdirectory 

  <img src="images/phone.jpg" alt="Phone product">
<link rel="stylesheet" href="css/styles.css">

Resolves to https://example.com/products/images/phone.jpg

Parent Directory (..)

Current page: https://example.com/products/phones/index.html

  <img src="../images/logo.png" alt="Logo">
<a href="../index.html">All products</a>
<link rel="stylesheet" href="../../css/global.css">
  • ../ goes up one directory level
  • ../../ goes up two levels

Project Structure Example 

  my-website/
├── index.html
├── about.html
├── css/
│   └── styles.css
├── js/
│   └── app.js
├── images/
│   ├── logo.png
│   └── hero.jpg
└── products/
    ├── index.html
    └── detail.html

From index.html (root):

  <link rel="stylesheet" href="css/styles.css">
<img src="images/hero.jpg" alt="Hero">
<a href="products/index.html">Products</a>

From products/detail.html:

  <link rel="stylesheet" href="../css/styles.css">
<img src="../images/logo.png" alt="Logo">
<a href="../index.html">Home</a>
<a href="index.html">All products</a>

Root-Relative Paths

Paths starting with / are relative to the site root, not the current folder:

  <link rel="stylesheet" href="/css/styles.css">
<img src="/images/logo.png" alt="Logo">
<a href="/products/">Products</a>

From any page on example.com, /css/styles.css always resolves to https://example.com/css/styles.css.

Path type Starts with Relative to
Relative images/ or ../ Current document
Root-relative / Site root
Absolute https:// Full URL

Root-relative paths work well in server-rendered apps and when pages live at varying depths.

Linking Between Pages 

  <!-- Same site, relative -->
<a href="contact.html">Contact us</a>

<!-- Same site, root-relative -->
<a href="/blog/post-1.html">Read article</a>

<!-- External, absolute -->
<a href="https://github.com/example" target="_blank" rel="noopener noreferrer">
  GitHub
</a>

Always use rel="noopener noreferrer" with target="_blank" for security.

Paths in CSS

CSS url() follows the same rules, but paths are relative to the CSS file location, not the HTML page:

  /* In css/styles.css */
.hero {
  background-image: url('../images/hero.jpg');
}

.icon {
  background-image: url('/images/icons/star.svg');
}

Protocol-Relative URLs (Legacy)

Older sites used //cdn.example.com/lib.js (no http: or https:). Modern practice is to always use HTTPS:

  <!-- Prefer this -->
<script src="https://cdn.example.com/lib.js"></script>

Common Mistakes

Problem Cause Fix
Broken images locally Absolute production URL in dev Use relative or root-relative paths
CSS not loading Path relative to HTML, not CSS file Fix path from CSS file location
../ goes too far Wrong folder depth Trace folder structure on paper
Case sensitivity Images/photo.jpg vs images/photo.jpg Match exact casing (Linux servers are case-sensitive)

Debugging Broken Paths

  1. Open browser DevTools → Network tab
  2. Reload the page
  3. Look for red 404 entries
  4. Compare requested URL with actual file location
  # Local development — serve over HTTP, not file://
python3 -m http.server 8000
# Visit http://localhost:8000

Opening HTML directly as file:// can break some relative paths and AJAX requests — use a local server.

Best Practices

  • Use relative paths for project assets during development
  • Use root-relative paths (/css/...) when pages exist at multiple directory depths
  • Use absolute HTTPS URLs for external resources and social meta tags
  • Keep a consistent folder structure: css/, js/, images/
  • Test on a local HTTP server before deploying

Next Steps

Apply paths to Images, Anchor Links, and stylesheets. Correct path usage is foundational — every resource on your site depends on it.