Quick Overview
Content Layer (HTML)
Forms the structure and puts text, images, and content into the page. This is the "what".
Presentation Layer (CSS)
Makes things look nice — controls layout, colours, fonts, spacing. This is the "how it looks".
Behaviour Layer (JavaScript)
Adds interactivity — form validation, sliders, animations, anything that responds to user action.
Why Layers Matter
Each can be updated independently. Teams specialise in one area. Problems are easier to fix because you know exactly which layer to look in.
What Are Layers?
When you visit a webpage, you're looking at a carefully separated system. Think of a restaurant: the kitchen (content layer) prepares the meal, the plating and presentation (presentation layer) makes it look appealing, and the waiter (behaviour layer) interacts with you and responds to your requests. Each part has its own job, and if something goes wrong, you know exactly where to look.
Key Principle: A webpage is made of three layers, each one specific part of how the page works. A benefit of this approach is that issues can be addressed independently — a design problem doesn't break functionality, a bug in interaction doesn't affect the structure.
Why Separate Layers?
- Independence: You can update the look (CSS) without touching the content (HTML). You can add interactivity (JavaScript) without changing either.
- Specialisation: Teams can divide work — one person handles layout, another handles functionality. Everyone becomes an expert in their layer.
- Maintenance: When something breaks or needs updating, you know exactly which layer to fix. No guessing.
- Reuse: You can apply the same CSS to multiple pages, or use the same JavaScript across projects.
Analogy: A house has a skeleton (the frame and walls), a skin (the paint, wallpaper, finishes), and a nervous system (the wiring and plumbing). If you want to repaint, you don't touch the frame. If you want to add electricity, you don't change the structure. They're independent but work together.
Content Layer: The Structure (HTML)
What Does It Do?
The content layer forms the structure of a webpage. This is where all the actual content lives — text, images, headings, paragraphs, links, form fields, everything that makes up the body of the page. Without the content layer, there is no webpage.
Think of the content layer as the skeleton. It defines what information is on the page and in what order. It answers: "What is this page about? What headings does it have? Where are the images? What form fields do I need?"
Content Layer = HTML (Hypertext Markup Language)
HTML is the markup language that creates the structure. Tags like <h1>, <p>, <img>, <form> tell the browser "this is a heading", "this is a paragraph", "this is an image", etc.
Examples of Content Layer Elements
- Text: Paragraphs, headings, lists, descriptions
- Images: Photos, diagrams, logos
- Forms: Text fields, buttons, checkboxes
- Semantic structure: Sections, articles, navigation areas
Real Example:
Key Point: HTML Only = Basic, Unstyled
What to Memorise