How a web page is built — Technology, 11–13 years
A web page is not just a picture on the internet. HTML describes its structure and meaning, while CSS controls how that structure looks on a screen.
The idea
HTML puts page parts into a meaningful order: a heading, a paragraph, a list or a link. CSS adds visual choices such as colour, spacing and size. The browser reads both and draws a page, rather than receiving one giant picture.
Why it was needed
A page made only of pictures would be hard to search, change or read aloud with assistive software. Early web creators needed a shared way to describe documents so different browsers could display them. Separating meaning from appearance also makes one page easier to reuse on many screens.
A worked example
To make a small page, write a heading saying “Our garden”, then a paragraph saying “We planted six beans”. Mark the first as a heading and the second as a paragraph in HTML. Add CSS that makes the heading green and the paragraph 18 pixels wide in a readable layout; the browser combines these instructions.
The common trap
People often treat HTML and CSS as two competing ways to design a page. That is understandable because both can appear in the same file or change what you see. They have different jobs: HTML says what each part is, while CSS says how it should look.
Where it is used
News sites, school pages, online shops and forms are built from structured web content. The same page may rearrange itself for a phone, tablet or large monitor. Search tools and screen readers can use the structure too, not just the visible decoration.
Keep exploring
Other languages
Loading MyLeoNes™…