Markup CityISSUE #27 of 39

file paths · relative · absolute · root

Tagg the BuilderVSThe Unclosed Tag

Tagg the Builder saysFile paths tell the browser where to find a resource: relative (from this file) or absolute (from the site root or full URL).

A relative path is read from the current file: img/logo.png (a subfolder), ../style.css (up one folder). A root-relative path starts with / and is read from the site root. An absolute URL includes the full https://….

Relative paths keep a project portable; root-relative paths are stable across deep pages; absolute URLs point at other sites. Getting these wrong is the #1 reason images and styles "don't load."

Power-ups you unlock

Relative: from this file (img/x.png, ../x.css)
Root-relative: from site root (/assets/x.png)
Absolute: full URL (https://site.com/x.png)
.. goes up a folder; . is the current folder

The Unclosed Tag attacks — common mistakes

A leading slash on a relative path (breaks on local file:// pages)
Wrong number of ../ steps when going up folders
Case-mismatched filenames (servers are usually case-sensitive)

Boss battlePoint an <img> at a relative path, then a root-relative one, then a full URL. Note which one loads in this sandbox and why.

Example code

<!doctype html>
<html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:monospace">
  <p>relative:      img/logo.png</p>
  <p>root-relative: /assets/logo.png</p>
  <p>absolute:      https://via.placeholder.com/64</p>
  <img src="https://via.placeholder.com/64" alt="only the absolute one resolves here">
</body></html>

▶ Open the interactive comic issue

‹ Scripts · Running Js From Html The Head · Meta · Title · Links ›