Web · Links and Images
Anchor Links
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — How Do Anchor Links Work?
Anchor links (or bookmark links) allow you to navigate to specific sections within the same webpage. This is especially useful for long pages with multiple sections.
To create an anchor link, you need two things:
1. An element with an
id
attribute that serves as the target
2. A link that points to that id using a hash/pound symbol (#) followed by the id name
<!-- The target element with an id -->
<h2 id="section2">Section 2</h2>
<!-- A link pointing to that id -->
<a href="#section2">Jump to Section 2</a>
Exercise 2 — Anchor Links in Action
Let's see how anchor links work in a complete example:
<!DOCTYPE html>
<html>
<head>
<style>
section {
height: 200px;
margin-bottom: 20px;
padding: 10px;
background-color: #f0f0f0;
}
nav {
position: sticky;
top: 0;
background-color: white;
padding: 10px;
margin-bottom: 20px;
}
nav a {
margin-right: 15px;
}
</style>
</head>
<body>
<nav>
<a href="#water">Water Types</a>
<a href="#fire">Fire Types</a>
<a href="#plant">Plant Types</a>
</nav>
<section id="water">
<h2>Water Type Codémons</h2>
<p>Water types like Aquachu are strong against fire types.</p>
</section>
<section id="fire">
<h2>Fire Type Codémons</h2>
<p>Fire types like Pyrochu are strong against plant types.</p>
</section>
<section id="plant">
<h2>Plant Type Codémons</h2>
<p>Plant types like Florachu are strong against water types.</p>
</section>
<p><a href="#">Back to top</a></p>
</body>
</html>
In this example:
- The navigation menu contains links to sections on the same page
- Each section has an
id
that matches the hash in the links
- Clicking a link scrolls to the corresponding section
- Note that
<a href="#">
(with just a hash) links to the top of the page
Exercise 3 — Creating Internal Navigation
Complete the HTML code to create an internal navigation system for a Codémon guide page. You need to create both the target sections with IDs and the links that point to them.
<!DOCTYPE html>
<html>
<body>
<h1>Codémon Guide</h1>
<!-- Navigation menu -->
<nav>
<a ____="____types">Types</a> |
<a href="#training">Training</a>
</nav>
<!-- Target sections -->
<h2 ____="types">Codémon Types</h2>
<p>Water, Fire, and Plant are the main Codémon types.</p>
<h2 id="training">Codémon Training</h2>
<p>Training your Codémon requires patience and strategy.</p>
</body>
</html>
Options: href # id target class name
Hint : Remember that internal links use href="#id" to point to elements with matching id attributes.
Exercise 4 — Anchor Link Target
Which attribute must be added to an HTML element to make it a target for an anchor link?
Options
• ```id```
• ```class```
• ```name```
• ```target```
Hint : Think about which attribute uniquely identifies an element on a page and is used with the # symbol in anchor links.
Exercise 5 — Simple Table of Contents with Anchor Links
You can make a mini table of contents using anchor links. Each link jumps to a section using its
id
.
<h1>Codémon Guide</h1>
<ul>
<li><a href="#water">Water</a></li>
<li><a href="#fire">Fire</a></li>
</ul>
<h2 id="water">Water Types</h2>
<p>Aquachu is a water Codémon.</p>
<h2 id="fire">Fire Types</h2>
<p>Pyrochu is a fire Codémon.</p>
<a href="#">Back to top</a>
Exercise 6 — Fix the Table of Contents Links
Fill in the missing attributes to link the TOC to the content sections.
<h1>Codémon Guide</h1>
<ul>
<li><a ____="____water">Water</a></li>
<li><a href="#fire">Fire</a></li>
</ul>
<h2 ____="water">Water Types</h2>
<p>Aquachu info...</p>
<h2 id="fire">Fire Types</h2>
<p>Pyrochu info...</p>
Options: href # id name class /
Hint : Use ```href="#id"``` in the link and ```id="id"``` in the section heading.
Exercise 7 — Linking to Specific Sections on Other Pages
You can also link to specific sections on other pages by combining a URL with a hash and section ID. This is useful when you want to direct users to a particular part of another page.
The syntax is:
<a href="page.html#section-id">Link text</a>
<!-- Linking to the "types" section on types.html -->
<a href="types.html#water-types">Learn about Water Types</a>
<!-- Linking to the "evolution" section on advanced-guide.html -->
<a href="advanced-guide.html#evolution">Learn about Evolution</a>
<!-- Linking to a section on an external website -->
<a href="https://example.com/codemon-guide#battling">Battling Guide on Example.com</a>
When a user clicks on one of these links, their browser will:
1. Navigate to the specified page
2. Automatically scroll to the element with the matching ID
Important Note
For this to work, the target page must have an element with the specified ID. If no matching ID is found, the browser will simply load the page without scrolling to any specific section.
Exercise 8 — Anchor Link Types and Their Usage
Match each anchor link syntax with its correct purpose or behavior:
Items to match
• <a href="#section-id">
• <a href="page.html#section-id">
• <a href="#">
• <h2 id="section-id">
Definitions
• Links to a section on the same page
• Links to a specific section on another page
• Links to the top of the current page
• Creates a target for anchor links
Exercise 9 — Which Link Creates an Anchor?
Which of the following links would allow a user to navigate directly to the "evolution" section of a page?
Options
• <a href="#evolution">Go to Evolution Section</a>
• <a href="evolution">Go to Evolution Section</a>
• <a href="section=evolution">Go to Evolution Section</a>
• <a href="/evolution">Go to Evolution Section</a>
Hint : Remember that anchor links use the # symbol followed by the ID of the target element.
Exercise 10 — Link to External Section
Complete the HTML code to create a link that points to the "water-types" section on the "codemon-guide.html" page.
<p>Learn more about <a ____="codemon-guide.html____water-types">water-type Codémons</a>.</p>
Options: href src # ? target id
Hint : To link to a specific section on another page, combine the page URL with a # followed by the section ID.