Chapter 3 · Web Applications
3-3 Fundamentals of Frontend Technology
Open any web page and you are seeing three technologies at work together. HTML builds the structure, like the frame of a building. CSS adds the appearance, like the interior. JavaScript adds the behaviour — boxes that respond, buttons that count, screens that update. A modern frontend goes further still: meaningful, adaptable to every screen, and faster to build.
Guiding question
How do HTML, CSS and JavaScript work together to build a web page, and what makes a modern frontend meaningful, adaptable and efficient to build?
Learning outcome. Explain the distinct roles of HTML, CSS and JavaScript in building a web page, and describe how semantic HTML, responsive design and frameworks improve a modern frontend.
With a partner. Open a web page you both use. Point at one thing that is content (words and pictures), one thing that is decoration (a colour, a rounded corner), and one thing that reacts when you click or type. You have just separated HTML, CSS and JavaScript without knowing their names yet.
The roles of HTML, CSS and JavaScript
| Technology | Role | Analogy |
|---|---|---|
| HTML | Defines the structure (skeleton) of a web page. Describes elements such as headings, paragraphs, images and links. | The frame of a building |
| CSS | Specifies the appearance of a web page (colours, layout, size, fonts, etc.). | The interior and exterior of a building |
| JavaScript | Adds behaviour and interactivity. Activates responses when buttons are pressed and updates only part of the screen. | The electrical and plumbing systems of a building |
Three technologies, three independent roles.
A page is made using all of them in combination — but each one does only its own job. That independence is the point, and the demonstration below is the quickest way to feel it: switch one off and only that one thing disappears.
Start with both switches off. That grey, plain thing is HTML on its own — which is what every web page in the world looks like underneath. Then add CSS, then JavaScript, and watch exactly one thing change each time.
My Web Page
A page about my favourite books.
Books I like
- Book A
- Book B
- Book C
Nothing above is a picture — it is a real page, and you are switching its layers on and off.
Semantic HTML
Semantic HTML … the idea of describing each part of a web page using element names (tags) that indicate their meaning.
e.g., use <header> at the top of the page, <nav> for navigation, <main> for the body, and <footer> at the bottom.
Two benefits:
① Improved accessibility
Accessibility — screen reader software can correctly understand the structure of the page, so information becomes easier to convey to users with visual impairments.
② Improved SEO
SEO (Search Engine Optimization) — search engines can more easily understand the content of a page correctly, making it more likely to be displayed appropriately in search results.
Why a name can matter. A plain box says nothing about itself. A tag called <nav> announces “this part is the navigation” — so a screen reader can offer to skip straight past it, and a search engine knows those words are menu links rather than the story. Same words on the page, but now machines understand what they are for.
You have just switched CSS and JavaScript off and watched the page survive. That is worth stopping on, because it is not a quirk of this demonstration — it is how the web is built, and it is the reason the next few paragraphs matter.
HTML says what things are: this is a heading, this is a paragraph, this is a button. Notice that is about meaning, not looks.
CSS says what they look like: this heading is large and dark blue.
JavaScript says what happens: when this button is pressed, open that panel.
The key point: only HTML is required. A page with no CSS is ugly and completely usable. A page with no JavaScript loses its moving parts and still shows its content. But a page with no HTML has nothing to style and nothing to animate — there is no page.
The book’s wording, which is what an exam wants: HTML gives structure and meaning, CSS controls appearance, and JavaScript adds behaviour. (p.69)
🧮 Why a heading must be a heading, and not just big text
- 1
You want a title. Option A: use a heading tag, <h1>. Option B: use an ordinary paragraph and make it big and bold with CSS.
Why this step: On screen these are indistinguishable — and that is exactly why students choose B and cannot see what is wrong with it.
- 2
Look at them with the CSS switched off, as you just did above.
Why this step: Option A still looks like a title, because the browser has its own idea of what a heading looks like. Option B collapses into ordinary text, because everything that made it a title was decoration.
- 3
Now consider a blind student using a screen reader, which reads the page aloud.
Why this step: A screen reader cannot see. It works entirely from the HTML — from what things ARE, not what they look like. This is the case that makes the difference concrete rather than theoretical.
Most people slip here: Screen readers let people jump between headings to find a section, in the same way you skim a page with your eyes. That only works if the headings are marked as headings.
- 4
Compare the two: option A is announced as a heading and can be jumped to. Option B is read as an ordinary sentence, indistinguishable from the rest.
Why this step: The page looked identical and one of them locked a person out of navigating it. Nothing about option B is visibly broken, which is why this kind of mistake survives every visual check.
- 5
Conclude: choose the tag that says what the thing IS, then make it look right with CSS.
Why this step: This is what the book means by tags that “mean something”. Semantic HTML is not tidiness — it is the only description of the page that anything other than a pair of eyes can use, and search engines read it the same way.
The approach that avoids this is to send real HTML first and use JavaScript to improve it, so that everything degrades one layer at a time instead of collapsing. That is the same ordering you saw in the demonstration above: structure first, then appearance, then behaviour — each layer assuming the one below it already works.
A well-documented consequence of building pages that require JavaScript to show any content.
Responsive design
Responsive design … a design concept in which the layout is automatically adjusted according to different screen sizes such as PCs, smartphones and tablets.
With a single web page, a display that is easy to view from any device can be achieved. As of 2026, websites are frequently accessed from smartphones, and support for responsive design is widely required. Against this backdrop the mobile-first concept — prioritising small screens such as smartphones from the design stage — has also become widespread.
Drag the width. This is one page rearranging itself — not three pages, and not a set of pictures.
900 px wide — desktop
Drag slowly and find the two moments it changes. One page, every screen — that is responsive design.
Frameworks
Framework … a structure that provides commonly used functions and components in advance, to make web application development more efficient.
By using a framework, developers do not need to write all the code from scratch and can develop more efficiently.
| Framework | Characteristics |
|---|---|
| React | Developed by Meta (formerly Facebook). It can efficiently update only part of the screen and is suited to large-scale web applications. |
| Vue | Has a simple structure and allows web applications to be built incrementally from small features. |
| Next.js | In addition to React’s features, includes mechanisms to speed up page display. |
How the real paper is built
The ministry sets half multiple choice and half written answer in every subject. The two halves are not the same skill. In the multiple-choice half you have to spot the wrong options quickly — and the wrong options are built out of the mistakes students really make. In the written half nobody gives you the answer to recognise; you have to produce it, in your own words, with a reason.
Practise both. Being good at one half and weak at the other costs you exactly half the paper.
- HTML
- — structure.
- CSS
- — appearance.
- JavaScript
- — behaviour.
- semantic HTML
- — tags that say what a part means.
- accessibility
- — usable by people with impairments.
- SEO
- — being found by search engines.
- responsive design
- — layout adapts to screen size.
- framework
- — ready-made functions for efficient development.
Worked Example
(1) Mark each statement with ○ if it is true or × if it is false.
A HTML is a technology that defines the structure (skeleton) of a web page.
B CSS is a technology that adds behaviour to a web page.
C Responsive design is a concept in which the layout is automatically adjusted according to different screen sizes.
D Using a framework eliminates the need to write all code from scratch and allows efficient development.
(2) Match each role (a–c) with the choice that fits: A HTML, B CSS, C JavaScript.
a Defines the structure of a web page
b Specifies the appearance of a web page
c Adds behaviour and interactivity to a web page
1 · Answer the following questions.
2(1) · Which is NOT an appropriate benefit of using semantic HTML?
Mark each statement with ○ if it is true or × if it is false.
Screen reader software can correctly understand the structure of the page.
Search engines can more easily understand the content of a web page.
The display speed of a web page necessarily becomes faster.
Information becomes easier to convey to users with visual impairments.
Watch for the word “necessarily”. Semantic HTML helps machines understand a page — it says nothing about how fast the page loads. Speed comes from elsewhere (a framework like Next.js, for instance). Mixing up the two benefits is the trap this question is built on.
2(2) · Which most appropriately describes a framework?
Mark each statement with ○ if it is true or × if it is false.
A language for defining the structure of a web page
A structure for making web application development more efficient
A technology for encrypting data and sending it safely
A design concept for supporting different screen sizes
Think as an Engineer — Investigate & Decide
A student club wants a simple web page that lists its events, is styled in the club’s colours, and has a button showing how many people have signed up.
1 · Observe first.
Open one web page you use often and note two things on it that change when you click or type. Then, for three features of the club page — the list of events, the club’s colours and layout, and the live sign-up counter — say which technology does each, and why.2 · Make it reach everyone.
Name one change that would make the page easier to read on a phone (responsive design), and one semantic-HTML choice that would help a screen reader.3 · Decide.
Recommend whether the club should separate HTML, CSS and JavaScript, and give two reasons. In pairs, compare your role assignments and agree together on what the sign-up counter needs. Give evidence for your answer.
You have already done step 1 once. The demonstration above is exactly this: the list of events is HTML, the colours and layout are CSS, and the counter that goes up is JavaScript. If you switched the layers on and off, you have seen the answer rather than memorised it.
In a New Context
Lesson Question — Answered
The lesson asked how HTML, CSS and JavaScript work together and what makes a modern frontend strong. A web page is built from three technologies with independent roles: HTML defines the structure, CSS specifies the appearance, and JavaScript adds behaviour and interactivity — combined, they create the page.
A modern frontend goes further. Semantic HTML uses meaningful tags so screen readers and search engines understand the page, improving accessibility and SEO. Responsive design adjusts the layout to any screen size, with a mobile-first approach. And frameworks such as React, Vue and Next.js provide ready-made functions so developers build efficiently without writing everything from scratch. A modern web page is therefore not one technology but a combination — structured, styled, interactive, meaningful, adaptable and efficient to build.
1 · Quiz yourself first.
Cover the Point! sections and say out loud what HTML, CSS and JavaScript each do, what semantic HTML gains you, what responsive design means, and what a framework is for.
2 · Read the passage and fill in the blanks.
Web pages are mainly composed of three technologies: ( a ), which defines the structure of the page; ( b ), which specifies the appearance; and ( c ), which adds behaviour and interactivity. The concept of adjusting the layout according to different screen sizes such as PCs, smartphones and tablets is called ( d ).
3(1) · For each task, which technology is used?
Match each description with the choice that fits it.
Describing the structure of headings and paragraphs
Changing the colour and size of text
Updating part of the screen when a button is pressed
Placing images and links
Setting the background colour of the entire page
Validating the contents entered into a form
Three questions to sort any of these. Is it what is on the page? HTML. Is it how it looks? CSS. Does it happen when the user does something? JavaScript.
3(2) · Which most appropriately describes the reason responsive design is needed?
Mark each statement with ○ if it is true or × if it is false.
To improve the display speed of websites
Because websites are accessed from various devices such as PCs, smartphones and tablets
To raise rankings in search engines
To add behaviour to web pages
Reflect: Of structure, style and behaviour, which do you notice most when a web page is badly made, and why?
Challenge: Name one website you use and describe one thing HTML, CSS and JavaScript each do on it.
Sign In to Keep Going
You've reached the end of the free preview. Sign in — and upgrade to Plus or Pro — to keep going with Programming and Artificial Intelligence.
Full Access
Unlock all 30 lessons