Know and understand the concept of a bookmark including methods of creating a bookmark within a web page

21. Website Authoring – Bookmarks

1. Web‑development layers (Syllabus 21.1)

  • Content layer – HTML markup that gives the page its structure and meaning.

  • Presentation layer – CSS that controls visual appearance (colour, layout, fonts).

  • Behaviour layer – JavaScript (optional for IGCSE) that adds interactivity.

2. What is a bookmark?

  • Browser bookmark (favourite) – a URL saved by the user’s web browser for quick access.

  • Page bookmark (internal anchor) – a marker placed inside an HTML document that lets a user jump to a specific part of the same page (or to that part from another page).

3. Why use bookmarks?

  • Facilitates navigation in long documents (terms & conditions, tutorials, reports).

  • Provides one‑click access to frequently visited pages.

  • Reduces scrolling, improving the overall user experience.

  • Supports accessibility – screen‑readers and keyboard users can move directly to the relevant section.

4. Creating a browser bookmark

  1. Open the required page in the browser.

  2. Press Ctrl + D (Windows) or ⌘ + D (Mac).

  3. Enter a meaningful name, choose a folder and click Done/Save.

5. Creating a page bookmark (internal anchor)

5.1 Using the id attribute (recommended)

<h2 id="chapter3">Chapter 3: Data Types</h2>
<a href="#chapter3">Go to Chapter 3</a>

5.2 Using the name attribute (deprecated – kept only for legacy support)

<a name="section2"></a>
<a href="#section2">Jump to Section 2</a>

5.3 Semantic elements with id

<section id="faq">
<h2>Frequently Asked Questions</h2>
…
</section>
<a href="#faq">Read the FAQ</a>

5.4 Linking to a bookmark on another page

<a href="guide.html#installation">Installation Instructions</a>

6. Required head‑section elements (Syllabus 21.2 – Content layer)

ElementPurpose
<title>…</title>Page title shown in the browser tab.
<meta charset="UTF-8">Specifies character encoding.
<meta name="description" content="…">Search‑engine summary.
<meta name="keywords" content="…">Optional keyword list.
<meta name="viewport" content="width=device-width, initial-scale=1">Responsive design on mobile devices.
<link rel="stylesheet" href="css/style.css">Links an external CSS file (presentation layer).

7. Required body markup (Syllabus 21.2)

7.1 Basic structure using div and semantic elements

<body>
<header>
<h1>My Tutorial</h1>
</header>
<nav role="navigation" aria-label="Page bookmarks">
<ul>
<li><a href="#intro">Introduction</a></li>
<li><a href="#chapter3">Chapter 3</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</nav>
<main>
<section id="intro">
<h2>Introduction</h2>
…
</section>
<section id="chapter3">
<h2>Chapter 3: Data Types</h2>
…
</section>
<section id="faq">
<h2>Frequently Asked Questions</h2>
…
</section>
</main>
<footer>
<p>© 2025 My Site</p>
</footer>
</body>

7.2 Tables (required for data presentation)

<table border="1">
<thead>
<tr><th>Feature</th><th>Supported</th></tr>
</thead>
<tbody>
<tr><td>Bookmarks</td><td>Yes</td></tr>
<tr><td>Audio</td><td>Yes</td></tr>
</tbody>
</table>

7.3 Images (with alternative text)

<img src="images/logo.png" alt="Company logo" width="120">

7.4 Audio and video (with controls)

<audio controls>
<source src="media/lecture.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<video controls width="480">
<source src="media/demo.mp4" type="video/mp4">
Your browser does not support the video element.
</video>

7.5 Hyperlinks – basic and safe linking

<a href="page.html">Link to another page</a>
<a href="https://www.example.com" target="_blank" rel="noopener">External site (opens in new tab)</a>
<a href="files/guide.pdf" download>Download guide (PDF)</a>

7.6 Relative vs. absolute URLs

  • Relative URL – points to a file relative to the current document.

    href="css/style.css"          
    href="../images/photo.jpg"

  • Absolute URL – includes protocol and domain.

    href="https://www.example.com/css/style.css"

    Use absolute URLs only for external resources; never for files that belong to the same website.

8. CSS basics (Syllabus 21.3 – Presentation layer)

8.1 Linking an external stylesheet

<link rel="stylesheet" href="css/style.css">

8.2 Selectors and specificity

Selector typeSpecificityExample
Element0‑0‑1p {margin:0;}
Class0‑1‑0.section {font-family:Arial;}
ID1‑0‑0#intro {background:#f0f0f0;}
Inline style1‑0‑0‑1style="color:red;"

Higher specificity overrides lower. When specificity is equal, the rule that appears later in the stylesheet wins.

8.3 Cascade order

  1. Browser default styles.

  2. External stylesheet (link).

  3. Internal stylesheet (<style> in the head).

  4. Inline style attribute.

8.4 Sample CSS for a bookmark‑rich page

/* external file: css/style.css */
body {font-family:Helvetica,Arial,sans-serif; line-height:1.6; margin:0;}
/* navigation list */
nav ul {list-style:none; padding:0; margin:0; display:flex; gap:1rem;}
nav a {color:#0066cc; text-decoration:none;}
nav a:hover {text-decoration:underline;}
/* sections */
section {margin:2rem 0; padding:1rem; border-left:4px solid #ddd;}
#faq {background:#fafafa;}
/* tables */
table {border-collapse:collapse; width:100%;}
th, td {border:1px solid #ccc; padding:0.5rem; text-align:left;}

9. Accessibility & e‑Safety (Syllabus 21.2 – Accessibility)

  • IDs – use lower‑case, hyphen‑separated names (e.g., contact-form); each ID must be unique on the page.

  • Alternative text for images – concise, descriptive (alt="Company logo").

  • ARIA landmarks – wrap a list of page bookmarks in <nav role="navigation" aria-label="Page bookmarks"> to aid screen‑reader users.

  • Link text – be meaningful; avoid generic “click here”.

  • Safe external links – when using target="_blank" always add rel="noopener" to prevent the new page from gaining access to the original window.

  • Test navigation with keyboard only (Tab → Enter) and with at least two browsers.

10. Summary of bookmark creation methods

MethodTarget elementHTML exampleNotes
id attribute (recommended)Any element (h2, section, div, …)<h2 id="intro">Introduction</h2>Unique, lower‑case, hyphenated IDs.
name attribute (deprecated)Empty <a> element<a name="top"></a>Only for legacy support.
Semantic element with id<section>, <article>, <nav> …<section id="faq">…</section>Improves structure and accessibility.
Cross‑page bookmarkAny element with an id on the target page<a href="guide.html#installation">Installation</a>Combine page URL with a hash.

11. Quick reference diagram (teacher’s slide)

Flow of creating a page bookmark – from adding an id to linking with #id (include in slide deck).