A web page has three jobs: holding content, looking right, and responding to the user. Structure is what is on the page, presentation is how it looks, and behaviour is what it does.
This lesson is part of web and project development. Keeping the three jobs apart makes each one easier to change, test and explain.
Which layer does what?
| Layer | Language | Question it answers | Example |
|---|---|---|---|
| Structure | HTML | What is on the page? | A heading, a button, a paragraph |
| Presentation | CSS | How does it look? | Text colour, spacing, font size |
| Behaviour | JavaScript | What happens when the user acts? | A click changes the status text |
A quick test: if you removed this line, would the content disappear, the look change, or the response stop? The answer names the layer.
Worked example: a homework reminder card
An original small page shows a homework task and a button to mark it done.
Structure (HTML)
<h2>Homework reminder</h2>
<p id="status">Pending</p>
<button id="done">Mark done</button>Presentation (CSS)
#status { color: orange; }
.finished { color: green; }Behaviour (JavaScript)
document.getElementById("done").addEventListener("click", function () {
var s = document.getElementById("status");
s.textContent = "Completed";
s.classList.add("finished");
});Trace one click. JavaScript finds the paragraph, changes its text to “Completed”, and adds the class finished. CSS then turns the colour green because the class now matches a rule.
Notice that JavaScript does not set a colour itself. It only switches a label, and the colour stays in CSS.
The mistake: mixing the layers
A typical tangled version looks like this.
<p id="status" style="color:orange">Pending</p>
<button onclick="document.getElementById('status').innerHTML='<font color=green>Completed</font>'">Mark done</button>It works once, but the colour appears in two places inside the HTML, and the button carries behaviour and styling in one line. Changing the green to blue means editing the button code.
| Change wanted | Tangled version | Separated version |
|---|---|---|
| Change finished colour | Edit inside the button attribute | Edit one CSS rule |
| Change the wording | Edit inside JavaScript text | Edit HTML or one JS string |
| Find a bug in the colour | Search the whole page | Open the CSS |
How do I decide where a change belongs?
Ask three questions in order.
- Is it content? Put it in HTML.
- Is it appearance? Put it in CSS.
- Is it a reaction to the user? Put it in JavaScript.
When behaviour needs a new look, let JavaScript switch a class name and let CSS define what the class looks like. That link keeps both layers clean.
Check yourself
Sort these into structure, presentation or behaviour: (a) a level 2 heading reading “Class notice”, (b) the heading turns red after 5 seconds, (c) the notice box has a blue border.
Answer
(a) Structure, because it is content that belongs in HTML. (b) Behaviour, because the page reacts over time, and the red colour itself would be defined in CSS as a class that JavaScript adds. (c) Presentation, because a border is appearance and belongs in CSS.
Item (b) is the tricky one. It involves two layers: JavaScript decides when, and CSS decides how it looks.
What to study next
Plan a whole project with these layers in planning an original assessed project, then test the behaviour layer in testing interaction and data validation.
For help tracing your own page, see online one-to-one Computer Science tuition.