HTML base: change how every relative URL resolves

Use it for a real task

A receipt archive may serve pages under one shared route prefix. The base makes a bare record path resolve beneath that prefix, but the same rule also affects relative images, stylesheets, form actions, and fragment links. That reach makes base a document-wide decision, not a shortcut for one link. Root-relative paths avoid this dependency when several route families share a page.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <base href="/receipts/">
  <title>Receipt archive</title>
</head>
<body>
  <main><h1>Archive</h1><a href="R-47">Open R-47</a></main>
</body>
</html>

What the markup guarantees

The link resolves to the receipt route only if the server actually serves it. A fragment-only link may also resolve against the base instead of the current page, so test it before adding a skip link or table of contents.

Cost and limits

One base element adds no runtime code, yet it can redirect many requests after a small edit. Teams with mixed assets and routes often spend less maintenance effort on explicit root-relative paths.

Common Mistakes

• Do not assume a fragment link stays on the current document after adding base.
• Do not place base after links that must resolve consistently.
• Do not use it to hide missing routes.

Connected lessons

• HTML anchors: use href for navigation and stable fragment targets
• HTML skip link: reach main content before repeated navigation
• HTML document skeleton: declare language, encoding, and a real title