The Four Layers
The web medium can be understood as four stacked layers, each building on the one below. This model applies to both sides of the client-server divide, and it helps you reason about where a technology fits and what depends on what.
┌─────────────────────────────────────────────┐ │ Interactivity │ JavaScript, WASM, server-side code │ (Behavior) │ "What happens when you interact" ├─────────────────────────────────────────────┤ │ Presentation │ CSS, fonts, images, media │ (Look & Feel) │ "How it looks" ├─────────────────────────────────────────────┤ │ Structure │ HTML elements, DOM, components │ (Organization) │ "How it's organized" ├─────────────────────────────────────────────┤ │ Content │ Text, data (JSON, XML, CSV) │ (Information) │ "What it says" └─────────────────────────────────────────────┘
Each layer depends on the one below. Interactivity manipulates structure. Presentation styles structure. Structure organizes content. Remove any layer and the ones above lose their foundation.
Drilling Down Each Layer
Content: Ranges from structured (JSON, XML, CSV) through semi-structured (HTML, Markdown) to unstructured (plain text). This is the raw information — the reason the page exists.
Structure: Ranges from individual HTML elements → components (web components, ad hoc) → page-level views → navigation/flow → full site/app architecture. URLs, routes, and endpoints define the structural addressing.
Presentation: CSS (including preprocessors and CSS-in-JS), fonts (local and custom/web fonts), images (raster: GIF/PNG/JPEG/WebP/AVIF; vector: SVG), and other media (audio, video, VR/AR — downloaded or streamed).
Interactivity: Client-side (JavaScript, libraries, frameworks, WASM binaries) and server-side (PHP, Java, Node.js, Python, C#, etc.). This is where the code lives.
Why the Layers Matter
The layers reveal dependencies. If you break the structure layer, presentation and interactivity fail. If you build interactivity without solid content and structure beneath it, you're building on sand.
The layers also map to the progressive enhancement philosophy (Tutorial 18): start with content, add structure, layer on presentation, enhance with interactivity.