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

21 Website Authoring – Creating Bookmarks with the id Attribute

What is a Bookmark?

A bookmark is like a sticky note you put in a book to remember a page. In a web page, a bookmark lets you jump straight to a specific spot. Think of it as a shortcut that takes you to a hidden treasure chest inside your page! 📚

Why Use the id Attribute?

The id attribute gives a unique name to an element, just like a student’s ID card. Only one element can have a particular id on a page, so it’s perfect for creating a single bookmark that can be linked to from anywhere. 🔑

Step‑by‑Step Guide

1. Choose the spot in your HTML where you want the bookmark. It could be a heading, a paragraph, or a section.
2. Add the id attribute to that element: id="myBookmark".
3. Create a link that points to the id by using a hash (#) followed by the id name: <a href="#myBookmark">Go to Bookmark</a>.
4. Test the link – clicking it should scroll the page directly to the bookmarked element.

Example Code

<h2 id="chapter1">Chapter 1: Introduction</h2>
<p>This is the first chapter of our guide.</p>
<a href="#chapter1">Jump to Chapter 1</a>

Common Mistakes

• Using the same id on multiple elements – remember, ids must be unique.
• Misspelling the id name in the link – the link will break if the names don’t match exactly.
• Putting the id on the wrong element – the bookmark will jump to the wrong spot.

Comparison: id vs. class vs. name

Exam Tips

Tip 1: Show the exact code you would write, including the id and the link.
Tip 2: Explain why the id must be unique and how the hash (#) works.
Tip 3: Use an analogy (e.g., a bookmark in a book) to demonstrate your understanding.
Tip 4: Remember to test the link in a browser – the exam may ask you to describe what happens when the link is clicked.
Tip 5: Keep your answer concise but complete – include the key steps and a short example.