Linking to sections using IDs in HTML - Deep Dive

Overview - Linking to sections using IDs

What is it?

Linking to sections using IDs means creating clickable links that jump to specific parts of a webpage. Each section on the page has a unique identifier called an ID. When you click a link with a matching ID, the browser scrolls directly to that section. This helps users navigate long pages easily.

Why it matters

Without linking to sections, users would have to scroll manually to find information, which can be frustrating and time-consuming. Section links improve user experience by making navigation faster and clearer. They also help organize content logically, making websites feel more professional and easier to use.

Where it fits

Before learning this, you should understand basic HTML structure and how links work. After mastering section linking, you can explore advanced navigation techniques like smooth scrolling, table of contents, and accessibility improvements.

Mental Model

Core Idea

An ID is a unique label on a page that links can target to jump directly to that spot.

Think of it like...

It's like putting a bookmark in a book so you can quickly flip to your favorite chapter without searching.

Page structure with IDs:

┌─────────────┐
│ Header      │
├─────────────┤
│ Section 1   │ ← id="section1"
├─────────────┤
│ Section 2   │ ← id="section2"
├─────────────┤
│ Section 3   │ ← id="section3"
└─────────────┘

Link example:
<a href="#section2">Go to Section 2</a>

Clicking the link scrolls the page to the box labeled Section 2.

Build-Up - 7 Steps

1

Foundation

What is an ID attribute

Concept: Introduce the ID attribute as a unique name for HTML elements.

In HTML, every element can have an ID attribute. This ID must be unique on the page. For example:

About us content

The ID 'about' labels this section uniquely.

Result

The section now has a unique name 'about' that can be referenced.

Understanding that IDs uniquely identify elements is the first step to linking directly to parts of a page.

2

Foundation

Creating basic links with href

Concept: Explain how the href attribute creates links to other pages or parts of the same page.

Links use the tag with href to point somewhere. For example: Visit site This link goes to another website.

Result

Clicking the link opens the target website.

Knowing how links work is essential before linking inside the same page.

3

Intermediate

Linking to an ID on the same page

🤔Before reading on: Do you think adding '#' before an ID in href links to that section or reloads the page? Commit to your answer.

Concept: Show how to link to a section on the same page using '#' plus the ID name.

To link to a section with ID 'about', write: About us Clicking this scrolls the page to the element with id="about".

Result

The page scrolls smoothly or jumps instantly to the 'about' section.

Knowing that '#' plus an ID in href targets that section unlocks internal page navigation.

4

Intermediate

Using IDs on different elements

🤔Before reading on: Can IDs be used on any HTML element or only on headings? Commit to your answer.

Concept: Explain that IDs can be on any element, not just headings or sections.

You can add IDs to paragraphs, divs, images, or any tag:

Welcome text

Go to intro This link jumps to the paragraph with id="intro".

Result

Clicking the link scrolls to the paragraph with the ID.

Understanding that IDs are flexible lets you link to any part of the page, not just big sections.

5

Intermediate

Combining links and IDs for navigation menus

Concept: Show how to build a menu that links to multiple sections using IDs.

Example menu:

Home Services Contact

Sections:

...

...

...

Result

Clicking menu links jumps to each section smoothly.

Using IDs with links creates easy-to-use navigation menus on long pages.

6

Advanced

Accessibility and focus with section linking

🤔Before reading on: Does linking to an ID automatically move keyboard focus to that section? Commit to your answer.

Concept: Explain how linking to IDs affects keyboard users and screen readers, and how to improve accessibility.

When clicking a link to an ID, the browser scrolls but may not move keyboard focus. To help, add tabindex="-1" to the target element:

Contact info

This allows scripts or browsers to focus the section for screen readers.

Result

Keyboard and screen reader users can better follow navigation jumps.

Knowing accessibility needs ensures all users benefit from section linking.

7

Expert

Smooth scrolling and URL hash behavior

🤔Before reading on: Does clicking a link with a hash always cause an instant jump or can it be smooth? Commit to your answer.

Concept: Explore how browsers handle scrolling to IDs and how CSS or JavaScript can make it smooth.

By default, clicking a link with href="#section" jumps instantly. You can add CSS: html { scroll-behavior: smooth; } This makes scrolling smooth and visually pleasant. Also, the URL updates with the hash, allowing bookmarking or sharing links to sections.

Result

Users see smooth scrolling and can share URLs that open at specific sections.

Understanding browser behavior and enhancements lets you create polished navigation experiences.

Under the Hood

When a link with href="#id" is clicked, the browser looks for the element with that ID in the current page. It then scrolls the viewport so that element is visible, usually aligning it at the top. The URL in the address bar updates with the hash (#id) without reloading the page. The browser maintains this state so refreshing keeps the scroll position.

Why designed this way?

This design allows quick navigation inside long documents without loading new pages. It evolved from early web needs to jump to parts of text, like bookmarks in physical books. Using IDs ensures uniqueness and prevents confusion. The hash in URLs is a lightweight way to represent position without server requests.

User clicks link with href="#section2"
        ↓
Browser finds element with id="section2"
        ↓
Browser scrolls viewport to show that element
        ↓
URL updates to include #section2
        ↓
User sees the target section immediately

Myth Busters - 4 Common Misconceptions

Quick: Does clicking a link with href="#id" reload the whole page? Commit yes or no.

Common Belief: Clicking a link with a hash reloads the entire page.

Reality: Clicking a hash link only scrolls to the element with that ID without reloading the page.

Why it matters: Thinking it reloads causes unnecessary page reloads or complex workarounds, hurting performance and user experience.

Quick: Can two elements share the same ID on a page? Commit yes or no.

Common Belief: Multiple elements can have the same ID to link to the same spot.

Reality: IDs must be unique per page; duplicates cause unpredictable scrolling behavior.

Why it matters: Duplicate IDs confuse browsers and assistive technologies, breaking navigation and accessibility.

Quick: Does adding an ID automatically make the element visible or styled differently? Commit yes or no.

Common Belief: Adding an ID changes how the element looks or behaves by default.

Reality: An ID is just a label; it does not affect appearance or visibility unless styled with CSS or targeted by scripts.

Why it matters: Assuming IDs change style leads to confusion when nothing visually changes, causing wasted debugging time.

Quick: Does linking to an ID always move keyboard focus to that section? Commit yes or no.

Common Belief: Clicking a link to an ID automatically moves keyboard focus there.

Reality: Browsers scroll to the section but do not move keyboard focus by default, which can confuse keyboard and screen reader users.

Why it matters: Ignoring focus management reduces accessibility, making navigation harder for users relying on keyboards or assistive tech.

Expert Zone

1

IDs should be short, descriptive, and use only letters, digits, hyphens, and underscores to avoid issues with CSS selectors and URLs.

2

Linking to IDs interacts with browser history: clicking back returns to the previous scroll position, which can be used for custom navigation flows.

3

Some browsers handle scrolling differently when fixed headers cover the target section; developers often add offset adjustments with JavaScript.

When NOT to use

Avoid using IDs for linking in single-page applications that manage navigation with JavaScript routing; instead, use framework-specific navigation methods. Also, do not rely on IDs for styling only; use classes for that purpose. For dynamic content, IDs must be managed carefully to avoid duplicates.

Production Patterns

In real websites, IDs are used for table of contents, FAQ jump links, and deep linking from external sites. Developers combine IDs with smooth scrolling, focus management, and URL state handling to create accessible, user-friendly navigation. Automated testing often checks that all IDs are unique and links work correctly.

Connections

URL Hash Fragments

Linking to IDs uses URL hash fragments to represent page position.

Understanding URL hashes helps grasp how browsers track and share specific page locations.

Accessibility (a11y) Practices

Section linking affects keyboard navigation and screen reader usability.

Knowing accessibility principles ensures section links serve all users effectively.

Bookmarks in Physical Books

Both are ways to mark and quickly find a specific place in a large document.

Recognizing this connection shows how digital navigation mimics familiar real-world tools.

Common Pitfalls

#1 Using the same ID on multiple elements.

Wrong approach:

First intro
Second intro

Correct approach:

First intro
Second intro

Root cause:

Misunderstanding that IDs must be unique leads to duplicate IDs causing unpredictable link behavior.

#2 Linking to an ID that does not exist on the page.

Wrong approach:

Go to missing

Correct approach:

Go to existing
Content here

Root cause:

Forgetting to add or mistyping the target ID means the link does nothing or scrolls to the top.

#3 Expecting the page to scroll smoothly without enabling it.

Wrong approach:

Jump
Content

Correct approach:

html {
scroll-behavior: smooth;
}

Jump
Content

Root cause:

Assuming browsers smooth scroll by default leads to abrupt jumps that can confuse users.

Key Takeaways

IDs are unique labels on HTML elements that let links jump directly to specific page parts.

Using href="#id" in links scrolls the page to the element with that ID without reloading.

IDs can be added to any element, enabling flexible navigation and better user experience.

Accessibility requires managing keyboard focus when linking to sections to support all users.

Enhancing links with smooth scrolling and proper URL hashes creates polished, shareable navigation.

Practice

1. What is the purpose of the id attribute in HTML when linking to sections?

easy

A. It hides the section from the page.

B. It styles the section with a unique color automatically.

C. It marks a section so you can link directly to it using an anchor.

D. It creates a new page in the browser.

Solution

1. Step 1: Understand the role of the id attribute

   The id attribute uniquely identifies an element on the page.

2. Step 2: Linking to sections using id

   Links with href="#id" jump directly to the element with that id.

3. Final Answer:

   It marks a section so you can link directly to it using an anchor. -> Option C

4. Quick Check:

   id marks section for linking [OK]

Hint: Use id to name sections for direct links [OK]

Common Mistakes:

• Thinking id changes style automatically
• Confusing id with class
• Believing id creates new pages

2. Which of the following is the correct syntax to link to a section with id="contact"?

easy

A. <a href="#contact">Contact</a>

B. <a link="#contact">Contact</a>

C. <a id="contact">Contact</a>

D. <a href="contact">Contact</a>

Solution

1. Step 1: Identify how to link to an id

   Links to sections use href="#id" where id is the target's identifier.

2. Step 2: Check each option's syntax

   <a href="#contact">Contact</a> uses href="#contact", which is correct. Others miss the # or use wrong attributes.

3. Final Answer:

   <a href="#contact">Contact</a> -> Option A

4. Quick Check:

   Link uses href="#id" [OK]

Hint: Use # before id in href to link sections [OK]

Common Mistakes:

• Omitting the # in href
• Using id attribute inside <a> instead of href
• Using non-standard attributes like link

3. Given this HTML snippet, what happens when the user clicks the link?

<a href="#about">About Us</a>
...
<section id="about">
  <h2>About Our Company</h2>
  <p>We build websites.</p>
</section>

medium

A. Nothing happens because the link is broken.

B. The page scrolls to the section with heading 'About Our Company'.

C. The browser opens a new tab with the 'about' page.

D. The page reloads to the top.

Solution

1. Step 1: Understand the link's href attribute

   The link uses href="#about", which targets the element with id="about".

2. Step 2: Describe browser behavior on clicking such a link

   The browser scrolls smoothly to the element with that id, showing the 'About Our Company' section.

3. Final Answer:

   The page scrolls to the section with heading 'About Our Company'. -> Option B

4. Quick Check:

   href="#id" scrolls to that section [OK]

Hint: Clicking href="#id" scrolls to that section [OK]

Common Mistakes:

• Thinking it opens a new page
• Assuming the link does nothing
• Believing it reloads the page

4. What is wrong with this code if the link does not jump to the section?

<a href="#services">Our Services</a>
...
<section id="service">
  <h2>Services Offered</h2>
</section>

medium

A. The href attribute should not have a #.

B. The link text must match the section heading exactly.

C. The section tag cannot have an id.

D. The id in the section does not match the href value.

Solution

1. Step 1: Compare href and id values

   The link uses href="#services" but the section has id="service" (missing 's').

2. Step 2: Understand matching requirement

   For the link to work, the href must exactly match the target element's id.

3. Final Answer:

   The id in the section does not match the href value. -> Option D

4. Quick Check:

   href and id must match exactly [OK]

Hint: Check href and id spellings match exactly [OK]

Common Mistakes:

• Forgetting the # in href
• Using wrong or mismatched id names
• Thinking link text affects the jump

5. You want to create a navigation menu that links to three sections: Home, About, and Contact. Which HTML snippet correctly sets up the links and sections using IDs?

hard

A. <nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>

<section id="home">Welcome!</section>
<section id="about">About us info</section>
<section id="contact">Contact details</section>

B. <nav>
<a href="home">Home</a>
<a href="about">About</a>
<a href="contact">Contact</a>
</nav>

<section id="home">Welcome!</section>
<section id="about">About us info</section>
<section id="contact">Contact details</section>

C. <nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>

<section id="home-section">Welcome!</section>
<section id="about-section">About us info</section>
<section id="contact-section">Contact details</section>

D. <nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>

<section id="home">Welcome!</section>
<section id="about">About us info</section>
<section>Contact details</section>

Solution

1. Step 1: Check href values in navigation links

   Links use href="#home", href="#about", and href="#contact" which is correct syntax to link to IDs.

2. Step 2: Verify matching section IDs

   Sections have matching id="home", id="about", and id="contact" exactly matching the href targets.

3. Final Answer:

   Option A correctly links navigation anchors to matching section IDs. -> Option A

4. Quick Check:

   Matching href="#id" and section id [OK]

Hint: Match href="#id" exactly with section id [OK]

Common Mistakes:

• Omitting # in href
• Mismatching href and id names
• Missing id attribute on sections