Be able to create a bookmark within a web page using an id attribute

Published by Patrick Mutisya · 14 days ago

ICT 0417 – Website Authoring: Creating Bookmarks

Website Authoring – Creating a Bookmark within a Web Page

Learning Objective

By the end of this lesson you will be able to create a bookmark (also called an internal link) in a web page by using the id attribute.

Key Concepts

  • A bookmark allows the user to jump directly to a specific part of the same page.

  • The target element must have a unique id attribute.

  • The link that points to the bookmark uses a hash (#) followed by the id value.

Step‑by‑Step Procedure

  1. Identify the section you want to jump to.

  2. Add an id attribute to the element that marks the start of that section.

  3. Create a hyperlink (<a>) elsewhere on the page and set its href to #yourID.

  4. Test the link to ensure it scrolls to the intended location.

Example Code

The following example shows a simple page with a table of contents that links to three sections further down the page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bookmark Example</title>
</head>
<body>
<h2>Table of Contents</h2>
<ul>
<li><a href="#section1">Section 1 – Introduction</a></li>
<li><a href="#section2">Section 2 – Details</a></li>
<li><a href="#section3">Section 3 – Summary</a></li>
</ul>
<h3 id="section1">Section 1 – Introduction</h3>
<p>...content for section 1...</p>
<h3 id="section2">Section 2 – Details</h3>
<p>...content for section 2...</p>
<h3 id="section3">Section 3 – Summary</h3>
<p>...content for section 3...</p>
</body>
</html>

Common Mistakes to Avoid

IssueConsequenceHow to Fix
Missing id on target elementLink does nothing or jumps to top of pageAdd a unique id attribute to the target element
Duplicate id valuesBrowser may jump to the first matching elementEnsure each id is unique within the page
Using spaces in id valueInvalid identifier; link failsUse only letters, numbers, hyphens, underscores, and periods (no spaces)

Practice Activity

  1. Create a new HTML file named bookmark_test.html.

  2. Write a heading <h2> called “My Favourite Recipes”.

  3. Below the heading, add an unordered list of three recipe names. Each list item should link to a detailed description further down the page.

  4. For each recipe description, use a <h3> with a unique id and a paragraph of placeholder text.

  5. Open the file in a browser and verify each link scrolls to the correct recipe.

Assessment Checklist

  • All target elements have a unique id.

  • All internal links use #id in the href.

  • No spaces or illegal characters in any id.

  • The page validates against the W3C HTML validator.

Suggested diagram: Visual flow of a hyperlink pointing to an element with an id attribute.