Paths & Fragment Links

Every `href` value is either a path to a resource or a fragment that jumps within the current page. Understanding how paths resolve makes links predictable wherever the page moves.

HTML6 min readConcept 15 of 42

What they are

A path in an href points to a file or route. It can be absolute (https://example.com/about) with a full scheme and domain, root-relative (/about) resolved from the site root, or relative (../images/logo.png) resolved from the current file's location. A fragment identifier starts with # and jumps within the same page to the element whose id matches the fragment.

Fragments and paths can combine: https://example.com/docs#installation takes the browser to the docs page and then scrolls to the element with id="installation". The fragment is always the last piece of the URL.

Why it matters

Relative paths are what keep a site portable. If you hard-code https://example.com/styles.css in every page, moving the site to a staging subdomain breaks every link. A root-relative /styles.css resolves correctly wherever the domain is. A file-relative path resolves from the file's own location, which is useful for assets that always travel alongside their page.

Fragment links are the original single-page navigation: a long article with a table of contents uses href="#section-3" to let readers jump directly to a heading. Screen readers expose heading and landmark navigation separately, but fragment links give sighted users and keyboard navigators a fast direct route without any JavaScript.

How it works

For relative paths, the browser resolves the href against the current page's URL. A leading / makes the path root-relative, anchoring it to the site origin. No leading slash means file-relative: images/logo.png looks for images/ in the same directory. ../ steps up one directory level. These rules are the same as in a terminal.

For fragment links, give the target element a unique id and write href="#that-id". The browser scrolls the target into view (smooth scroll if scroll-behavior: smooth is set on :root) and updates the URL bar. If no element matches the fragment, nothing happens. An href="#" with no id scrolls back to the very top.

The full URL anatomy: scheme://host:port/path?query#fragment. Each piece is optional except in context: you always need a scheme for absolute links, but root-relative and file-relative links omit it. The fragment is always last and never sent to the server.

Try it

Click a section link and watch the target row highlight. Each chip shows a different href value and where it resolves.

<!-- root-relative: always resolves -->
<!-- from the site origin -->
<a href="/about">
About this site
</a>
href/about
resolveshttps://yoursite.com/about

Root-relative: /about resolves to the site root, regardless of page location.

href type

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1A page lives at /blog/post.html. The href is /images/photo.jpg. Where does the browser look for the image?
  2. 2A link has href="#contact". There is no element with id="contact" on the page. What happens?
  3. 3A page is at /docs/guide/intro.html. The href is ../../images/logo.png. Where does it resolve?

Remember this

  • Root-relative paths (/path) resolve from the site origin; file-relative paths resolve from the current file's directory.
  • ../ steps one directory up; chain them to climb multiple levels.
  • Fragment links (href="#id") scroll to the element with that id; no match means no scroll.
  • href="#" (empty fragment) scrolls to the page top; fragments are never sent to the server.

Done with this concept?

Mark it complete to track your progress. No login needed.