HTML Academy · Lesson

Linking to Sections Fragment Identifiers

Jump to page sections using id attributes and hash links.

Linking to Sections Fragment Identifiers is a free HTML Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Is a Fragment Identifier?

A fragment identifier is the part of a URL after the # symbol:

https://example.com/page#section-3
                          │
                          └─ Fragment: "section-3"

<!-- The browser: -->
<!-- 1. Loads the page -->
<!-- 2. Scrolls to the element with id="section-3" -->

Creating Anchor Targets with id

To link to a section, give it an id:

<!-- The target: give any element an id -->
<h2 id="installation">Installation</h2>
<h2 id="configuration">Configuration</h2>
<h2 id="faq">Frequently Asked Questions</h2>

<!-- The link: use # + id value -->
<a href="#installation">Jump to Installation</a>
<a href="#faq">Go to FAQ</a>

Linking from Another Page

You can link to a section on another page:

<!-- From a different page -->
<a href="/docs/guide#installation">Installation Guide</a>
<!-- Loads /docs/guide and scrolls to #installation -->

<!-- Absolute URL to a section -->
<a href="https://example.com/docs#api">API Documentation</a>

id Naming Rules

Rules for valid id values:

Must be unique on the page — no two elements share an id
Cannot start with a number in CSS (though valid in HTML)
No spaces — use hyphens: my-section
Case-sensitive: #FAQ and #faq are different

Table of Contents Pattern

Fragment links enable on-page tables of contents:

<nav aria-label="Table of Contents">
  <ol>
    <li><a href="#intro">Introduction</a></li>
    <li><a href="#setup">Setup</a></li>
    <li><a href="#usage">Usage</a></li>
    <li><a href="#api">API Reference</a></li>
  </ol>
</nav>

<h2 id="intro">Introduction</h2>
<h2 id="setup">Setup</h2>

Smooth Scrolling with CSS

Add smooth scroll behavior to fragment navigation:

/* Apply to the entire page */
html {
  scroll-behavior: smooth;
}

/* Or for specific containers */
.scrollable {
  scroll-behavior: smooth;
}

Scroll Padding for Fixed Headers

Fixed navigation bars overlap scrolled-to sections. Fix with scroll-margin-top:

/* If you have a 60px fixed header */
:target {
  scroll-margin-top: 70px;
}

/* Or set globally for all headings */
h2, h3, h4 {
  scroll-margin-top: 70px;
}
/* scroll-margin-top offsets where the browser scrolls to */

The :target CSS Pseudo-class

Style the currently targeted section with :target:

/* Highlight the targeted section */
:target {
  background-color: #fff3cd;
  outline: 2px solid #ffc107;
  padding: 1rem;
}

<!-- Result: when user clicks #installation, -->
<!-- the installation section gets highlighted -->

Back to Top Link

A common pattern — back to top link using fragment:

<a href="#top" id="back-to-top">↑ Back to top</a>
<!-- Link to page top: either id="top" on body or use empty href # -->
<!-- Always give it meaningful text for accessibility -->

<!-- Position it fixed with CSS: -->
<!--
#back-to-top {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
}
-->

Fragment and Browser History

Fragment navigation adds entries to browser history:

Clicking a fragment link pushes a history entry
The browser Back button returns to the previous scroll position
This is normal behavior — SPAs can use pushState to manipulate it

Named Anchors (Legacy)

Before id attributes, <a name> was used for anchors — now obsolete:

<!-- Old way (do not use): -->
<a name="section-1"></a>
<h2>Section 1</h2>

<!-- Modern way: -->
<h2 id="section-1">Section 1</h2>
<!-- Use id on the target element, not a separate anchor tag -->

Quick Check

What CSS property prevents a fixed navigation bar from covering a scrolled-to section?

Recap: Fragment Identifiers

Fragment link essentials:

#id in href scrolls to the element with that id
Every target element needs a unique id attribute
Works both on the same page and from other pages
scroll-behavior: smooth for animated scrolling
scroll-margin-top to avoid fixed header overlap
:target pseudo-class to highlight the current section

Frequently asked questions

Is the “Linking to Sections Fragment Identifiers” lesson free?

Yes — the full text of “Linking to Sections Fragment Identifiers” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.

What will I learn in “Linking to Sections Fragment Identifiers”?

Jump to page sections using id attributes and hash links. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML Academy?

No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Linking to Sections Fragment Identifiers” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML Academy lesson?

Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

The anchor Element and href Attribute
Absolute vs Relative URLs
Opening Links in New Tabs and Download Attribute
Linking to Sections Fragment Identifiers

← Back to HTML Academy