Content Details - hypertext - Module 5 - Human Computer Interaction (HCI) - Nebula SkillHub

1. Definition and Structure

**Hypertext** is a non-sequential writing technique that links different parts of text or other content together. It allows the reader to follow pathways through associated information rather than following a rigid, linear sequence.

Core Components:

**Node (or Page):** A chunk of information, which can be text, images, video, or data. In the web context, this is a web page or document.
**Link (or Hyperlink):** The connection between nodes. It is the mechanism that allows non-sequential navigation.
**Anchor:** The location within the source node from which the link originates (usually highlighted text).
**Destination:** The location in the target node where the link ends.

Hypertext vs. Hypermedia:

While **Hypertext** strictly refers to text-based linking, **Hypermedia** expands this concept to include links between different media types, such as text to image, video to text, or audio to another file. The modern Web is an example of Hypermedia.

2. Historical Development

The theoretical foundation for hypertext predates computer implementation by decades, highlighting the human desire to manage information non-linearly.

Vannevar Bush (1945) - Memex

Proposed the **Memex** (Memory Extender) in his essay "As We May Think." The Memex was a conceptual, electromechanical desk device intended to help individuals store, recall, and link information through "associative indexing" (trails), solving the problem of information overload.

Ted Nelson (1965) - Hypertext & Xanadu

Coined the term **"Hypertext"** and designed **Project Xanadu**, a highly ambitious system that aimed to be a universal publishing structure with built-in bidirectional links, version control, and digital rights management.

Tim Berners-Lee (1989) - World Wide Web

Developed the core technologies for the modern web: **HTML** (HyperText Markup Language), **HTTP** (HyperText Transfer Protocol), and **URLs** (Universal Resource Locators), successfully realizing a simple, decentralized hypertext system.

3. HCI and Navigation

Hypertext introduces unique usability challenges related to navigation and user orientation.

Cognitive Load

Good hypertext design manages the number of links and the clarity of anchors to prevent users from being overwhelmed by choices.

"Lost in Hyperspace"

The classic usability problem where users lose track of their location within a large network of links.

**Solution:** Breadcrumbs, clearly marked visited links, and sitemaps.

4. HTML: The Implementation

HTML is the language that structures hypertext documents on the web, primarily through the use of the anchor element.

The Anchor Element ($$)

This is the fundamental tool for creating links in HTML, turning a piece of text or an image into a navigational anchor.

                            
<a href="https://www.example.com/target-page.html">This is the Hyperlink Anchor</a>

Link Attributes and Types

**External Link:** Links to a different website or domain.

**Internal Link:** Links to a different page within the same domain.

**Fragment Link:** Links to a specific section (using `id` or `name` attributes) within the *same* document (e.g., $$ to an $
$ header).

**Semantic Links:** Using the `rel` attribute to define the relationship between the current document and the linked document (e.g., `nofollow`, `prev`, `next`).

$ header).

Navigation

hypertext

Study Notes

Fundamental Concept: Hypertext