HtmlHow-ToBeginner · 3 min read

How to Create Skip Navigation Link in HTML for Accessibility

Create a skip navigation link in HTML using an <a> tag with an href pointing to an id on the main content. Place it at the top of the page and use CSS to make it visible when focused, allowing keyboard users to jump directly to the main section.

📐

Syntax

A skip navigation link uses an <a> tag with an href attribute pointing to an element's id where the main content starts. The target element must have a matching id.

<a href="#main-content">Skip to main content</a>: The link users click or tab to.
<main id="main-content"></main>: The main content area with the matching id.

html

<a href="#main-content" class="skip-link">Skip to main content</a>
<main id="main-content">
  <!-- Main page content here -->
</main>

Output

A visible link labeled 'Skip to main content' at the top, which when clicked or focused and activated, jumps the page view to the main content area.

💻

Example

This example shows a skip navigation link that appears only when focused, helping keyboard users jump directly to the main content.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Skip Navigation Link Example</title>
  <style>
    .skip-link {
      position: absolute;
      top: -40px;
      left: 0;
      background: #000;
      color: #fff;
      padding: 8px 16px;
      z-index: 100;
      text-decoration: none;
      font-weight: bold;
      transition: top 0.3s ease;
    }
    .skip-link:focus {
      top: 0;
    }
  </style>
</head>
<body>
  <a href="#main-content" class="skip-link">Skip to main content</a>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <main id="main-content">
    <h1>Welcome to the Main Content</h1>
    <p>This is where the main page content starts.</p>
  </main>
</body>
</html>

Output

A page with a hidden 'Skip to main content' link that becomes visible when tabbed to, allowing users to jump past the navigation menu directly to the main content heading and paragraph.

⚠️

Common Pitfalls

Not giving the target element a matching id causes the link to do nothing.
Making the skip link always visible can clutter the page visually.
Not styling the skip link to appear on keyboard focus makes it useless for keyboard users.
Placing the skip link too far down the page reduces its usefulness.

html

<!-- Wrong: Missing target id -->
<a href="#main-content">Skip to main content</a>
<main>
  <!-- No id here -->
</main>

<!-- Right: Matching id on main -->
<a href="#main-content">Skip to main content</a>
<main id="main-content">
  <!-- Content -->
</main>

📊

Quick Reference

Use <a href="#id"> to link to main content.
Give the main content an id matching the link.
Hide the skip link visually but show it on keyboard focus.
Place the skip link as the first focusable element in the page.

✅

Key Takeaways

Always use a skip link with an href pointing to the main content's id for accessibility.

Make the skip link visible only when focused to avoid cluttering the page.

Ensure the target element has the exact id referenced by the skip link.

Place the skip link at the very top of the page for immediate keyboard access.