# Hypermedia Hypermedia extends the concept of [[Hypertext]] to include not just text, but any media—images, audio, video, and interactive elements—connected through hyperlinks. The term was coined by [[Ted Nelson]] alongside "hypertext" in 1963, recognizing that the same associative linking principles apply to all forms of media. The World Wide Web is fundamentally a hypermedia system, where [[Hypertext Markup Language (HTML)]] documents can embed and link to any media type. While hypertext refers specifically to linked text, hypermedia encompasses the broader ecosystem of interconnected multimedia resources. A web page with embedded images, video players, and links to other pages is hypermedia in action. The concept has evolved from simple image maps in early HTML to rich interactive applications, streaming media, and immersive experiences. Modern web technologies like HTML5, CSS3, and JavaScript enable sophisticated hypermedia applications that would have seemed magical to the concept's originators. ## Hypermedia vs Hypertext | Aspect | Hypertext | Hypermedia | |--------|-----------|------------| | **Content** | Text only | Text, images, audio, video | | **Links** | Text-to-text | Any media to any media | | **Scope** | Narrower | Broader, includes hypertext | | **Example** | Wiki articles | YouTube with annotations | ## Media Types in Hypermedia | Media Type | Examples | Web Technology | |------------|----------|----------------| | **Text** | Articles, documents | HTML, Markdown | | **Images** | Photos, diagrams | PNG, JPG, SVG, WebP | | **Audio** | Music, podcasts | MP3, WAV, Web Audio API | | **Video** | Streams, clips | MP4, WebM, HLS | | **Interactive** | Forms, apps | JavaScript, WebGL | | **3D** | Models, VR | Three.js, WebXR | ## Hypermedia Architecture ``` Hypermedia System Components: ┌─────────────────────────────────────────────────────────────┐ │ CLIENT (Browser) │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ HTML Document │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ │ │ Text │ │ Image │ │ Video │ │ │ │ │ │ <p> │ │ <img> │ │ <video> │ │ │ │ │ └────┬─────┘ └────┬─────┘ └────┬─────┘ │ │ │ │ │ │ │ │ │ │ │ └────────────┴────────────┘ │ │ │ │ │ │ │ │ │ HYPERLINKS <a> │ │ │ └─────────────────────────────────────────────────────┘ │ └───────────────────────────┬─────────────────────────────────┘ │ HTTP/HTTPS ┌───────────────────────────▼─────────────────────────────────┐ │ SERVER │ │ [HTML] [CSS] [JS] [Images] [Video] [API Data] │ └─────────────────────────────────────────────────────────────┘ ``` ## HATEOAS (Hypermedia as the Engine of Application State) A REST architectural constraint where APIs return hypermedia links: ```json { "user": { "id": 123, "name": "Alice", "_links": { "self": "/users/123", "orders": "/users/123/orders", "edit": "/users/123/edit" } } } ``` | Principle | Description | |-----------|-------------| | **Discoverability** | Clients discover actions through links | | **Self-describing** | API responses contain navigation | | **Decoupling** | Client doesn't hardcode URLs | | **Evolvability** | Server can change URLs without breaking clients | ## Evolution of Web Hypermedia | Era | Technology | Capabilities | |-----|------------|--------------| | **1991** | HTML 1.0 | Text, basic links | | **1995** | HTML 2.0 | Images, forms | | **1997** | HTML 4.0 | Tables, frames, CSS | | **2000s** | Flash | Rich media, interactivity | | **2008** | HTML5 | Native video/audio, canvas | | **2010s** | SPA frameworks | Dynamic applications | | **2020s** | WebXR, WebGPU | Immersive, GPU computing | ## Hypermedia Formats | Format | Purpose | |--------|---------| | **HTML** | Web documents | | **HAL** | JSON hypermedia API | | **JSON-LD** | Linked data | | **Atom/RSS** | Syndication feeds | | **Collection+JSON** | Collection APIs | | **Siren** | Entity hypermedia | ## References - https://en.wikipedia.org/wiki/Hypermedia - Fielding, R. (2000). REST architectural style ## Related - [[Hypertext]] - [[Hypertext Markup Language (HTML)]] - [[Hypertext Transfer Protocol (HTTP)]] - [[Ted Nelson]] - [[World Wide Web]]