What is Linking to sections using IDs in HTML?

HTMLmarkup~5 mins

Linking to sections using IDs in HTML

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Linking to sections using IDs helps users jump directly to important parts of a webpage quickly and easily.

You want to create a table of contents that jumps to different parts of a long article.

You want users to quickly find a specific section on a page without scrolling.

You want to link from one part of a page to another part on the same page.

You want to improve navigation for users using keyboard or screen readers.

You want to share a link that opens a page scrolled to a specific section.

Syntax

HTML

<a href="#sectionID">Link text</a>
...
<section id="sectionID">Content here</section>

The id attribute must be unique on the page.

The href uses a hash (#) followed by the exact id value.

Examples

This link jumps to the 'About Us' section on the same page.

HTML

<a href="#about">About Us</a>
...
<section id="about">
  <h2>About Us</h2>
  <p>Information about our company.</p>
</section>

Multiple links in a navigation menu jump to different sections.

HTML

<nav>
  <a href="#contact">Contact</a>
  <a href="#services">Services</a>
</nav>

<section id="services">
  <h2>Our Services</h2>
</section>

<section id="contact">
  <h2>Contact Us</h2>
</section>

Sample Program

This page has a navigation menu with links that jump to different sections on the same page using IDs. The sections have tabindex="-1" to allow keyboard focus after jumping.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Linking to Sections Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      line-height: 1.5;
      padding: 1rem;
    }
    nav {
      background-color: #f0f0f0;
      padding: 1rem;
      margin-bottom: 2rem;
      border-radius: 0.5rem;
    }
    nav a {
      margin-right: 1.5rem;
      color: #0066cc;
      text-decoration: none;
      font-weight: 600;
    }
    nav a:hover, nav a:focus {
      text-decoration: underline;
      outline: none;
    }
    section {
      margin-bottom: 3rem;
    }
    h2 {
      color: #333;
    }
  </style>
</head>
<body>
  <nav aria-label="Main navigation">
    <a href="#intro">Introduction</a>
    <a href="#features">Features</a>
    <a href="#contact">Contact</a>
  </nav>

  <section id="intro" tabindex="-1">
    <h2>Introduction</h2>
    <p>Welcome to our website. Use the links above to jump to different sections.</p>
  </section>

  <section id="features" tabindex="-1">
    <h2>Features</h2>
    <ul>
      <li>Easy navigation</li>
      <li>Fast access to content</li>
      <li>Improved user experience</li>
    </ul>
  </section>

  <section id="contact" tabindex="-1">
    <h2>Contact</h2>
    <p>You can reach us at <a href="mailto:info@example.com">info@example.com</a>.</p>
  </section>
</body>
</html>

OutputSuccess

Important Notes

Use meaningful and unique IDs for each section to avoid confusion.

Adding tabindex="-1" to sections helps keyboard users focus on the section after jumping.

Test your links by clicking them and watching the page scroll smoothly to the right spot.

Summary

Use the id attribute to mark sections you want to link to.

Use <a href="#id"> to create links that jump to those sections.

This improves navigation and user experience on longer pages.