Link Purpose Patterns

Anchor Target Link

A same-page contents link points to a section id, and the target uses scroll-margin-top for breathing room.

Program

Same-page links should point to a real section id. scroll-margin-top helps the target land with space below sticky headers or page chrome.

same_page_anchor_target.html
Visuals: captured from real browser rendering
<nav aria-label="Contents">
  <a href="#shipping-section">Shipping details</a>
</nav>
<section id="shipping-section" class="anchor-target">
  <h2>Shipping details</h2>
  <p>Orders ship in two business days.</p>
</section>
<style>
  .anchor-target { scroll-margin-top: 4rem; border: 1px solid #94a3b8; padding: 12px; }
</style>

  1. Name the contents nav.

    The same-page link is grouped in a labelled contents nav.
    The same-page link is grouped in a labelled contents nav.

  2. Point to the section id.

    The link target uses a hash that stays on the same page.
    The link target uses a hash that stays on the same page.

  3. Create the target section.

    The target section id matches the contents link.
    The target section id matches the contents link.

  4. Add breathing room on scroll.

    The target keeps space above it when navigated to.
    The target keeps space above it when navigated to.

  5. Render the target relationship.

    The destination section is visibly framed after the contents link.
    The destination section is visibly framed after the contents link.

  6. Check link and target match.

    The link text and target heading both say Shipping details.
    The link text and target heading both say Shipping details.
same-page link A hash link moves to an element with a matching id on the same page.
target id The section id is the destination for the contents link.
scroll margin scroll-margin-top leaves breathing room when the target scrolls into view.