HTML skip link: reach main content before repeated navigation

Last updated: 5 Oct 20267 min read

tutorial

A skip link is an ordinary anchor placed before repeated navigation and targeted at the main content region.

Use it for a real task

A receipt dashboard has a long set of site links on every page. The first keyboard stop lets a reader jump directly to the current task. The destination ID is unique and sits on main. CSS may visually tuck the link away until focus, but it must remain keyboard reachable and visibly appear when focused; hiding it permanently defeats the purpose.

<a href="#main-content">Skip to receipt content</a>
<header>
  <nav aria-label="Site"><a href="/receipts">Receipt index</a></nav>
</header>
<main id="main-content">
  <h1>Receipt R-47</h1>
  <p>Review state: pending.</p>
</main>

What the markup guarantees

The index route must exist. A fragment jump is not a substitute for a sensible heading structure, and focus behavior should be tested in the browsers your users actually use.

Cost and limits

The anchor adds almost no transfer or runtime cost. It saves repeated keyboard actions, especially on pages whose navigation expands over time.

Common Mistakes

Do not put the skip link after the long navigation.
Do not target a missing or duplicate ID.
Do not make the link invisible while it has keyboard focus.

Connected lessons

html

accessibility