Learning goal: explain how content, presentation, and behaviour work together on a web page.
Estimated reading time: 4 minutes.
The big picture
A browser turns a collection of instructions into something you can read and interact with. Three common ingredients are HTML, CSS, and JavaScript.
This guide introduces their roles. Read one section at a time, then explain the main idea in your own words.
HTML gives the content structure
HTML describes the parts of a document. A heading introduces a topic. A paragraph contains text. A link connects one place to another.
Semantic elements help communicate the purpose of the content, both visually and to assistive technology.
- Headings organise ideas.
- Lists group related items.
- Links connect useful information.
Pause and recall: Why is a heading more useful than simply making a paragraph bold?
CSS changes the presentation
CSS controls how content appears: its colours, typography, spacing, and layout.
The same document can have several presentations. A narrow screen might use one column, while a larger screen has room for more. Reader preferences can also change the presentation.
Try it: Open the reading settings and increase the line spacing. The meaning of the content stays the same.
JavaScript adds behaviour
JavaScript can respond to actions, update the page, and manage interactions.
In this reader, JavaScript connects the reading controls to the document. It changes presentation and navigation without changing the words.
Check your understanding: Which ingredient gives a button its structure? Which changes its appearance? Which can respond when you press it?
Review the three roles
- HTML: what the content is.
- CSS: how it is presented.
- JavaScript: how it behaves.
These roles often work together, but separating them makes a document easier to adapt.
Explore further
You can explore the MDN guide to HTML.
External links need an internet connection. This guide and its reading controls work offline.
Practice: build a tiny explanation
- Choose a topic you understand well.
- Write a heading and a short paragraph about it.
- List three useful details.
- Change the reading settings and notice which presentation you prefer.
A starter you can adapt
<article>
<h1>A topic I understand</h1>
<p>Explain the main idea in your own words.</p>
</article>Answer check
A heading identifies structure; bold text only adds emphasis. HTML supplies a button element, CSS changes its appearance, and JavaScript can respond to activation.
Reflection: Which part of this explanation would you change for a first-time learner?