HTMLmarkup~10 mins

Linking to sections using IDs in HTML - Browser Rendering Trace

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Render Flow - Linking to sections using IDs

[Read <html>] -> [Read <body>] -> [Read <a href="#section1">] -> [Create anchor element with href="#section1"] -> [Read <section id="section1">] -> [Create section element with id="section1"] -> [Add text content] -> [Close section] -> [Close body] -> [Close html]

The browser reads the HTML top to bottom, creating elements. It recognizes the anchor with href pointing to an ID and the section with that ID. When clicked, the browser scrolls to the section with the matching ID.

Render Steps - 4 Steps

Code Added:<a href="#section1">Go to Section 1</a>

Before

[Empty page]

→

After

[Link: Go to Section 1]

Adding an anchor link creates clickable text that points to an ID on the page.

🔧 Browser Action:Creates anchor element in DOM with href attribute

Code Sample

This code creates two links at the top left that jump to two different sections below when clicked, smoothly scrolling the page to each section.

HTML

<nav>
  <a href="#section1">Go to Section 1</a>
  <a href="#section2">Go to Section 2</a>
</nav>

<section id="section1">
  <h2>Section 1</h2>
  <p>This is the first section.</p>
</section>

<section id="section2">
  <h2>Section 2</h2>
  <p>This is the second section.</p>
</section>

HTML

body {
  font-family: Arial, sans-serif;
  line-height: 1.5;
  padding: 1rem;
}

nav {
  position: fixed;
  top: 1rem;
  left: 1rem;
  background: #f0f0f0;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
}

section {
  margin-top: 5rem;
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  max-width: 600px;
}

section + section {
  margin-top: 3rem;
}

Render Quiz - 3 Questions

Test your understanding

After applying step 2, what do you see on the page?

AA clickable link and a visible section titled 'Section 1' below it

BOnly a clickable link with no sections visible

CTwo links side by side with no sections

DA section titled 'Section 1' but no links

Common Confusions - 2 Topics

Why doesn't clicking the link scroll to the section?

The link's href must exactly match the section's id attribute. If the id is missing or spelled differently, the browser can't find the target to scroll to.

💡 Make sure href="#section1" matches id="section1" exactly (case sensitive).

Why does the section appear behind the fixed navigation when I jump to it?

Fixed navigation stays on top and can cover the section's top part. This happens because the section scrolls to the top edge of the viewport, but the fixed nav overlaps it.

💡 Add top padding or margin to sections to avoid being hidden behind fixed headers.

Property Reference

Attribute	Description	Visual Effect	Common Use
href="#id"	Links to an element with the matching ID	Clicking scrolls page to that element	Page navigation within same document
id="id"	Assigns a unique identifier to an element	Target for links and scripts	Mark sections or elements for linking or scripting
position: fixed	Fixes element position relative to viewport	Element stays visible when scrolling	Sticky navigation or buttons
margin-top	Adds space above an element	Separates sections visually	Spacing content vertically

Concept Snapshot

Use the id attribute on sections to create targets. Use anchor links with href="#id" to jump to those sections. Clicking the link scrolls the page to the matching section. Fixed navigation stays visible when scrolling. Ensure href and id match exactly for linking to work.