Why Linking to sections using IDs in HTML? - Purpose & Use Cases

The Big Idea

Discover how a simple ID can turn a long page into a quick, easy-to-navigate guide!

The Scenario

Imagine you have a long webpage with many parts, like a storybook with chapters. You want to jump directly to Chapter 5 by clicking a link at the top.

The Problem

If you try to scroll manually or tell people to scroll down, it's slow and frustrating. You might even give wrong page numbers or directions, making it hard to find the right part quickly.

The Solution

Using IDs lets you name each section uniquely. Then, links can jump straight to that section instantly, like a magic bookmark that takes you exactly where you want.

Before vs After

✗ Before

Click here to go to Chapter 5 (but no direct jump, user must scroll manually)

✓ After

<a href="#chapter5">Go to Chapter 5</a>
<section id="chapter5">Chapter 5 content here</section>

What It Enables

This makes navigation smooth and fast, improving user experience by letting visitors jump to exactly what they want without searching.

Real Life Example

On a FAQ page, users can click a question at the top and jump directly to the answer below, saving time and effort.

Key Takeaways

Manual scrolling is slow and error-prone.

IDs let you name sections uniquely.

Links with IDs jump directly to those sections instantly.