A table of contents – HTML Exercise with Solution

Let readers jump within a long page.

What to build

Two links at the top that jump to two headings further down.

Requirements

An h2 reading Rules with id="rules".
An h2 reading Prizes with id="prizes".
A link reading Rules with the fragment #rules, and one reading Prizes with #prizes.
Both links come before both headings.

Constraints

Every id must be unique.

Example

<a href="#rules">Rules</a> jumps to <h2 id="rules">.

Why it works

A fragment is the id of an element on the page, so the browser can scroll to it without loading anything.

Hints

Hint 1

Give each heading an id.

Hint 2

A link to it starts with # followed by that id.

Solution

Show one correct solution (try it yourself first)

<h1>Quiz night</h1>
<p><a href="#rules">Rules</a> <a href="#prizes">Prizes</a></p>
<h2 id="rules">Rules</h2>
<p>Teams of four.</p>
<h2 id="prizes">Prizes</h2>
<p>A big cake.</p>

Lesson: Links and how pages connect →