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

Website Authoring – Creating a Bookmark (Internal Link)

Learning Objective

By the end of this lesson you will be able to:

  • Create a functional bookmark (internal link) using the id attribute.

  • Explain how the activity fits into the three‑layer web‑development model required by Cambridge IGCSE ICT 0417.

  • Apply the required head‑section elements, use relative paths, and add simple CSS styling.

1. Three‑Layer Web Development Model (Syllabus 21.1)

  • Content layer – HTML: structures the page (headings, lists, tables, images, video, links, id attributes, etc.).

  • Presentation layer – CSS: controls appearance (colours, fonts, layout, spacing). The bookmark activity belongs to this layer when you style the link or the target heading.

  • Behaviour layer – Scripting (JavaScript): adds interactivity. No scripting is required for the IGCSE exam – only HTML + CSS may be used.

2. Required Head‑section Elements (Syllabus 21.2)

ElementExampleWhy it is required
<meta charset="UTF-8">Specifies character encoding.Ensures all characters (including non‑ASCII) display correctly on any device.
<meta name="description" content="…">Provides a brief description for search engines.Improves discoverability and demonstrates understanding of meta‑data (AO1).
<meta name="keywords" content="HTML, bookmark, internal link">Lists relevant keywords.Helps search engines index the page; part of the required meta‑tags.
<meta name="viewport" content="width=device-width, initial-scale=1">Makes the page responsive on mobile devices.Ensures the layout scales correctly – a compulsory tag for modern web pages.
<title>…</title>Page title shown in the browser tab.Identifies the page to the user and to search engines.
<link rel="stylesheet" href="styles.css">Links an external CSS file (relative path).Separates presentation from content and satisfies the relative‑path requirement.

3. Content Layer – Required HTML Elements (Syllabus 21.3)

  • Semantic headings: <h1> – <h6> (use the appropriate level for document structure).

  • Sectioning elements (optional but recommended): <section>, <article> – help define logical parts of the page.

  • Lists: ordered (<ol>) and unordered (<ul>) for a table of contents.

  • Tables: <table>, <tr>, <th>, <td>.

  • Images: <img src="images/pic.jpg" alt="…" width="300"> – use relative paths.

  • Video: <video> with <source> (also relative).

  • Division element: <div> for grouping media or styling.

  • Hyperlink: <a href="#targetID">Link text</a> – the core of a bookmark.

  • Target attribute (optional): target="self" (default) or target="blank" for a new tab.

  • id attribute: unique identifier for the element that will receive the bookmark focus.

4. Presentation Layer – CSS (External Stylesheet)

The stylesheet must be linked with a relative path and can contain both visual and layout properties.

/* styles.css – example */
.toc-link {
color: #0066cc;               /* visual – colour the TOC links blue */
text-decoration: none;
font-weight: bold;
margin-bottom: 0.5em;         /* layout – adds space between links */
}
.toc-link:hover {
text-decoration: underline;
}
/* Simple layout for headings and media */
h3 {
margin-top: 2em;
color: #333;
}
.media {
margin-top: 1.5em;
}
.media img,
.media video {
display: block;
max-width: 100%;
height: auto;
}

5. Behaviour Layer – No Scripting Required

For the IGCSE exam only HTML and CSS are assessed. Any JavaScript would be ignored and could cause a loss of marks.

6. Creating a Bookmark – Step‑by‑Step Procedure

  1. Decide which section the user should jump to (e.g., a heading or a <div>).

  2. Give that element a unique id value (e.g., id="section1").

  3. In the Table of Contents (or any other place), create a hyperlink:

    <a class="toc-link" href="#section1">Go to Section 1</a>

  4. Optionally add target="_blank" if the link should open a new tab.

  5. Style the link with a class (e.g., .toc-link) in the external CSS file.

  6. Test the page in a browser – clicking the link should scroll smoothly to the target element.

7. Full Example Page (HTML + External CSS)

The example below follows the syllabus requirements: required meta‑tags, relative paths, semantic headings, a table of contents, a table, an image, a video, and a bookmark link that opens in a new tab.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Bookmark example for IGCSE ICT">
<meta name="keywords" content="HTML, bookmark, internal link, CSS">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bookmark Example</title>
<link rel="stylesheet" href="styles.css">  <!-- relative path – required -->
</head>
<body>
<h1>My Sample Page</h1>
<h2>Table of Contents</h2>
<ul>
<li><a class="toc-link" href="#section1">Section 1 – Introduction</a></li>
<li><a class="toc-link" href="#section2">Section 2 – Data Table</a></li>
<li><a class="toc-link" href="#section3">Section 3 – Media</a></li>
<li><a class="toc-link" href="#section4" target="_blank">Section 4 – Summary (new tab)</a></li>
</ul>
<section id="section1">
<h3>Section 1 – Introduction</h3>
<p>...content for section 1...</p>
</section>
<section id="section2">
<h3>Section 2 – Data Table</h3>
<table border="1">
<tr><th>Item</th><th>Description</th></tr>
<tr><td>Apple</td><td>A sweet fruit.</td></tr>
<tr><td>Banana</td><td>A yellow fruit.</td></tr>
</table>
</section>
<section id="section3">
<h3>Section 3 – Media</h3>
<div class="media">
<img src="images/sample.jpg" alt="Sample image" width="300">
<!-- relative path to the images folder – required -->
<video width="320" controls>
<source src="video/sample.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</section>
<section id="section4">
<h3>Section 4 – Summary</h3>
<p>...content for section 4...</p>
</section>
</body>
</html>

8. Common Mistakes to Avoid

IssueConsequenceHow to Fix
Missing id on target elementLink does nothing or jumps to the top of the pageAdd a unique id to the element you want to jump to.
Duplicate id valuesBrowser jumps to the first matching element onlyEnsure every id is unique within the page.
Spaces or illegal characters in idInvalid identifier; link failsUse only letters, numbers, hyphens (-), underscores (_) and periods (.).
Absolute file paths for CSS, images or videoPage may break when moved to another computerAlways use relative paths (e.g., styles.css, images/pic.png, video/clip.mp4).
Styling a bookmark link with an id instead of a classViolates the “class vs. id” rule and makes future changes harderUse a class (e.g., .toc-link) for styling; reserve id for the target element only.

CSS Tip

Use a class for any visual styling that will be applied to multiple elements (e.g., all TOC links). Keep id values for the single element that receives the bookmark focus. This follows the syllabus rule that id is unique, whereas a class can be reused.

9. Quick Exercise – Practising Relative Paths

  1. Rename the folder images to pics.

  2. Update the src attribute of the image in the example page to pics/sample.jpg.

  3. Refresh the page in the browser – the image should still appear.

  4. Explain in a sentence why the page still works (answer: because the path is relative to the HTML file, not an absolute location on a specific computer).

10. Practice Activity (Extended)

  1. Create a new file called bookmark_test.html.

  2. In the <head> section, add the six meta‑tags from the checklist and link to an external stylesheet styles.css (you may leave the CSS file empty for now).

  3. Add a main heading <h2>My Favourite Recipes</h2>.

  4. Below it, create an unordered list of three recipes. Each list item should contain a link that points to a detailed description further down the page:

    <a href="#recipe1">Spaghetti Bolognese</a>

  5. For each recipe description, add a heading with a unique id (recipe1, recipe2, recipe3) and a paragraph of placeholder text.

  6. Inside the first recipe description insert a 2 × 2 table; inside the second insert an image using a relative path (e.g., images/spaghetti.jpg).

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

  8. In styles.css add a rule to colour the TOC links blue and give them a bottom margin of 0.4em.

11. Assessment Checklist (AO1‑AO3)

  • AO1 – Recall: List the required head‑section meta‑tags, explain the purpose of the id attribute, and write the syntax of an internal link (<a href="#id">).

  • AO2 – Application: Produce a complete HTML page that includes all required meta‑tags, uses relative paths for CSS, images and video, creates a functional bookmark, and applies at least one CSS rule.

  • AO3 – Analysis/Evaluation:

    • Check the page for duplicate or illegal id values.

    • Confirm that every required element (headings, list, table, image, video, div, class, target attribute) is present.

    • Explain how the bookmark belongs to the content layer of the three‑layer model and how the external stylesheet demonstrates the presentation layer.

12. Suggested Diagram

Diagram showing a hyperlink pointing to an element with an id attribute

Flow of a bookmark: <a href="#section"> → browser reads the hash → scrolls to the element with id="section".