← Years 9–10 Data & Information

Navigation and hotspots in interactive content

A link that jumps the viewer to another page or section when clicked, so they choose their own path through interactive content. Use #id to jump to a section.

Part of: 9-10 Digital Technologies: Interactive content with emerging tools — Module 6, QCE Digital Solutions Unit 3 — Interactions Between Users, Data and Digital Systems — Module 70

Understanding Navigation and hotspots in interactive content in Years 9–10 Data & Information

What it does: A link to the main page (index.html) on every slide works as a menu or home button. The id gives the section a name that an anchor link such as href="#results" can target. A link uses the href attribute to say where it goes. The src attribute is for things like images and does not make a link. Interactive content lets the viewer choose where to go next. A fixed order is more like a printed handout. A hotspot only works if it has somewhere to jump to. Without a destination, a click has no effect. The value of href needs matching quote marks on both sides. A missing opening quote breaks the link.

Common mistakes: A link uses the href attribute to say where to jump. src is for images and media, so this link goes nowhere. It should be href="quiz.html". To jump to a section on the same page, the href needs a # before the id. It should be href="#rules", otherwise the browser looks for a page called rules.

Class: _____________________  ·  Name: _____________________  ·  Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Navigation and hotspots in interactive content to a class →

This module's key terms are also in a printable crossword (Modules 83–132) and word search (Modules 6–132).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning
Duo
Which link takes the viewer to another page called quiz.html?
<a href="quiz.html">Start quiz</a><a src="quiz.html">Start quiz</a>
Matches
<a href="#quiz">Quiz</a> with <h2 id="Quiz1">
↓
The link name and the id do not match, so the link cannot find the section. Both must be exactly quiz.
Applying
Meanings
Term
<a href="page2.html">
Meaning
A link that jumps the viewer to another page or section when clicked, so they choose their own path through interactive content. Use #id to jump to a section.
Practice
<nav>
Testing
Gaps
<a ="page2.html">Next slide</a>
Check Answer
Spots
2 <a href="home.html">Home</a>
3 <a src="quiz.html">Quiz</a>

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

The 'Angelfish' badge — Reef Perfectionist, one of Cloodit's 106 collectible badges
Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy
Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games
Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print
Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. Which link takes the viewer to another page called quiz.html?
A. <a href="quiz.html">Start quiz</a> ✓
B. <a src="quiz.html">Start quiz</a>
A link uses the href attribute to say where it goes. The src attribute is for things like images and does not make a link.
2. Which statement about interactive content is true?
A. The viewer must always follow one fixed order from the first page to the last.
B. The viewer chooses their path by clicking links, buttons or hotspots. ✓
Interactive content lets the viewer choose where to go next. A fixed order is more like a printed handout.
3. A section on your page has the id "results". Which link jumps to it?
A. <a href="#results">See results</a> ✓
B. <a href="results#">See results</a>
An anchor link puts # at the start, followed by the id. So #results jumps to the element with id="results".
4. Where should a Home button or menu link usually go in an interactive project?
A. On every page, so the viewer can always get back to the start ✓
B. Only on the last page, so the viewer can't leave early
A menu or home link on every page stops viewers getting lost and lets them choose where to go next.
5. Which line makes a section the target of an anchor link?
A. <h2 href="tips">Study tips</h2>
B. <h2 id="tips">Study tips</h2> ✓
The id attribute marks the spot to jump to. href belongs on the link, not on the heading.

Match the Pairs

<a href="page2.html">Next</a> → A link that jumps the viewer to another page called page2.html when they click it
<a href="#quiz">Go to quiz</a> → A link that jumps to the section on the same page that has the id quiz
A home button that sends the viewer back to the start page from any slide → <a href="index.html">Home</a>
Marking a section with an id so a link can jump straight to it → <h2 id="results">Results</h2>
<a href="#quiz">Quiz</a> with <h2 id="Quiz1"> → The link name and the id do not match, so the link cannot find the section. Both must be exactly quiz.
<a>Next slide</a> → The link has no href attribute, so it does not know where to send the viewer. Add href="slide2.html".

Key Term

<a href="page2.html">
A link that jumps the viewer to another page or section when clicked, so they choose their own path through interactive content. Use #id to jump to a section.

Fill in the Blanks

1. <a href="page2.html">Next slide</a>
Hint: Type the attribute name that holds the destination of a link.
2. <h2 id="quiz">Quiz</h2> <a href="#quiz">Jump to quiz</a>
Hint: Type the link target that jumps to the section with the id shown above, using the symbol for ids.
3. <a href="slide3.html">Go to slide 3</a>
Hint: Type the tag name used to make a clickable link.
4. <h2 id="menu">Menu</h2> <a href="#menu">Back to menu</a>
Hint: Type the attribute that gives a section a name so a link can jump to it.
5. <nav> <a href="home.html">Home</a> </nav>
Hint: Type the HTML element that wraps a menu of links, matching the closing tag.

Spot the Error

Question 1
A <nav>
B <a href="home.html">Home</a>
C <a src="quiz.html">Quiz</a>
D </nav>
Line C — A link uses the href attribute to say where to jump. src is for images and media, so this link goes nowhere. It should be href="quiz.html".
Question 2
A <h2 id="rules">Rules</h2>
B <a href="rules">Rules</a>
C <p>Read before you play.</p>
Line B — To jump to a section on the same page, the href needs a # before the id. It should be href="#rules", otherwise the browser looks for a page called rules.
Question 3
A <h1 id="menu">Game Menu</h1>
B <h2>Level 2</h2>
C <a href="#menu">Menu</b>
Line C — The link is opened with <a> so it must be closed with </a>. Closing with </b> leaves the link unclosed and breaks the menu button.
Question 4
A <body>
B <h1>Space Quiz</h1>
C <a href="index.html">Home
D </body>
Line C — The home link is missing its closing </a> tag, so the link never ends properly. It should be <a href="index.html">Home</a>.
Question 5
A <a href="slide1.html>Start</a>
B <p>Pick a path to begin.</p>
C <a href="slide2.html">Skip</a>
Line A — The href value is missing its closing quote mark. It should be href="slide1.html" so the browser knows where the address ends.

Student with a class code? Join your class →