Paths describe how to locate resources relative to URL hierarchies. Mixing strategies confuses deployments—pick conventions per project.
Kinds
- Absolute URL: includes scheme/host/path—required for cross-origin assets.
- Protocol-relative: deprecated pattern (
//cdn)—prefer explicit HTTPS. - Site-root-relative: begins with
/; resolves from domain root. - Document-relative: walks from current file (
../img/a.png).
Fragment URLs
guide.html#setup jumps to id="setup" after navigation.
Query strings
?q=html&sort=asc supplies parameters—encode reserved characters.
Servers & case sensitivity
Linux hosts treat paths as case-sensitive even if macOS dev machines do not—normalize filenames early.
Static hosting vs frameworks
Framework routers often prepend base paths (/blog/). Align asset prefixes with deployment targets.
Deployment footguns
- Trailing slash policies differ—relative links break when servers redirect between
/pageand/page/. - Assume Linux case sensitivity everywhere even if teammates develop on macOS defaults.
- Hash routes (
#-only SPA paths) confuse server analytics—establish canonical logging early.
Resolved URL examples
Assume the current document URL is https://example.com/learn/html/paths/
| Href in markup | Resolves to |
|---|---|
| `/assets/logo.svg` | https://example.com/assets/logo.svg |
| `page2` | https://example.com/learn/html/paths/page2 |
| `../css/app.css` | https://example.com/learn/css/app.css |
| `#toc` | Same path + fragment (#toc) on navigation |
Important interview questions and answers
- Q: What is the practical difference between `id` and `class`?
A: `id` must be unique and is used for fragments/labeling; `class` is reusable for styling and behavior grouping. - Q: Why is `defer` commonly preferred for scripts?
A: It preserves HTML parsing, executes after parse, and avoids blocking rendering unlike classic synchronous scripts. - Q: How do `srcset` and `sizes` work together?
A: `srcset` provides candidate files and `sizes` tells expected rendered width so the browser can pick an optimal resource.
Tip: Prefer root-relative paths (/assets/app.css) in deployed apps.