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

Published by Patrick Mutisya · 14 days ago

ICT 0417 – Website Authoring: Bookmarks

21. Website Authoring – Bookmarks

What is a Bookmark?

A bookmark is a reference that allows a user to jump directly to a specific location within a web page or to a saved web address for later retrieval. In the context of web authoring, two main types are considered:

  • Browser bookmark (or favourite): A saved URL stored by the web browser so the user can return to a page quickly.

  • Page bookmark (internal anchor): A marker placed inside an HTML document that lets users navigate to a particular section of that same page.

Why Use Bookmarks?

  • Improves navigation in long documents (e.g., terms & conditions, tutorials).

  • Provides quick access to frequently visited pages.

  • Enhances user experience by reducing scrolling.

Creating a Browser Bookmark

  1. Open the desired web page in the browser.

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

  3. Enter a name for the bookmark and choose a folder.

  4. Click Done/Save. The bookmark now appears in the browser’s bookmark bar or menu.

Creating a Page Bookmark (Internal Anchor)

Page bookmarks are created using HTML elements that define a target and links that refer to that target.

Method 1 – Using the id Attribute

Place an id on any element where you want the bookmark to land.

<h2 id="chapter3">Chapter 3: Data Types</h2>

Link to the bookmark with a hash (#) followed by the id value:

<a href="#chapter3">Go to Chapter 3</a>

Method 2 – Using the name Attribute (Deprecated)

Older HTML used the name attribute on an empty <a> element.

<a name="section2"></a>

Linking works the same way:

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

Although still supported by browsers, this method is discouraged in favour of id.

Method 3 – Using Semantic Elements with id

HTML5 encourages the use of semantic tags such as <section>, <article>, or <nav> with an id.

<section id="faq">
<h2>Frequently Asked Questions</h2>
…
</section>

Link:

<a href="#faq">Read the FAQ</a>

Method 4 – Linking to a Bookmark on Another Page

Combine the target page’s URL with the hash.

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

Summary of Bookmark Creation Methods

MethodTarget ElementHTML ExampleNotes
id attributeAny element (e.g., h2, div)<h2 id="intro">Introduction</h2>Recommended for all new pages.
name attribute (deprecated)Empty <a> element<a name="top"></a>Supported for backward compatibility only.
Semantic element with id<section>, <article>, etc.<section id="contact">…</section>Improves document structure and accessibility.
Cross‑page bookmarkAny element with id on the target page<a href="page.html#section">Link</a>Useful for multi‑page tutorials.

Best Practices

  • Use clear, descriptive id values (e.g., contact-form, not c1).

  • Keep bookmark names unique within a page to avoid conflicts.

  • Provide visible link text that indicates the destination (avoid generic “click here”).

  • Test bookmarks in multiple browsers to ensure consistent behaviour.

Suggested diagram: Flow of creating a page bookmark – from adding an id to linking with #id.