HTMLAnchors & Fragment Links

Anchor Fragments — Linking Within a Page

A fragment identifier — the part of a URL after # — lets a link jump straight to a specific spot on a page. Combined with id attributes on target elements, this powers tables of contents, footnotes, and the widely used "skip to content" accessibility pattern.

Fragment Identifiers (#section)

Add an id to any element, then link to it by prefixing that id with #.

fragment-basic.html

HTML
<a href="#pricing">Jump to pricing</a>

<!-- ... further down the page ... -->

<section id="pricing">
  <h2>Pricing</h2>
  <p>Plans start at $9/month.</p>
</section>
id values must be unique
Every `id` on a page must be unique. If two elements share the same `id`, the browser will jump to whichever one it finds first, and it's invalid HTML regardless.
Linking From a Different Page

Fragments also work appended to a full URL — the browser loads the target page, then scrolls straight to the matching id.

cross-page-fragment.html

HTML
<a href="/html/links#anatomy">Read about link anatomy</a>
Same-Page Smooth Scrolling

By default, jumping to a fragment is an instant, jarring cut. CSS's scroll-behavior: smooth makes it animate instead, purely as a visual enhancement — no JavaScript required.

smooth-scroll.html

HTML
<style>
  html {
    scroll-behavior: smooth;
  }
</style>

<nav>
  <a href="#intro">Introduction</a>
  <a href="#details">Details</a>
</nav>

<section id="intro">...</section>
<section id="details">...</section>
Respect reduced motion
Some users set a "prefers-reduced-motion" system preference to avoid animation. Wrap `scroll-behavior: smooth` in a `@media (prefers-reduced-motion: no-preference)` query so it's only applied for users who haven't asked for reduced motion.
Skip-to-Content Accessibility Pattern

Keyboard and screen-reader users often have to tab through the entire header and navigation on every single page before reaching the main content. A "skip to content" link — the very first focusable element on the page — lets them jump straight past it.

skip-link.html

HTML
<style>
  .skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
  }
  .skip-link:focus {
    left: 0;
    padding: 8px 16px;
    background: #fff;
    z-index: 100;
  }
</style>

<body>
  <a class="skip-link" href="#main-content">Skip to main content</a>

  <header>
    <nav><!-- long navigation menu --></nav>
  </header>

  <main id="main-content">
    <h1>Page Title</h1>
    <!-- ... -->
  </main>
</body>

The link is visually hidden off-screen until it receives keyboard focus (via Tab), at which point it becomes visible — sighted mouse users never see it, but keyboard users get an immediate shortcut.

Quick Reference

Pattern

Example

Link to an id on the same page

<a href="#section-id">

Link to an id on another page

<a href="/page#section-id">

Target element

<section id="section-id">

Smooth scrolling

scroll-behavior: smooth; in CSS

Skip link

First focusable element, targets #main-content

  • Fragment links are pure HTML/CSS — no JavaScript needed for basic jump-to-section or smooth scrolling behavior.

  • Always give your <main> (or main content wrapper) an id so a skip link has somewhere to land.

  • Test skip links with the keyboard (Tab key) — that is how real users encounter them.