HTML structure and CSS presentation
Why content and presentation are kept separate, and the basics of each.
Review these first
Learning objectives
What you need to be able to do
Teacher-mapped phrasing — check against the official Cambridge syllabus for exact wording.
- 21.1.1Describe the use of HTML for structure and CSS for presentation, and explain the benefits of separating them.
5 minute read
HTML structure and CSS presentation
A web page is built from two layers with two distinct jobs.
HTML — content and structure
HTML (hypertext markup language) defines what is on the page and what each part is: headings, paragraphs, lists, tables, images and hyperlinks. Content is placed between tags, e.g. <h1> for a main heading and <p> for a paragraph. Structural elements include headings <h1> to <h6>, paragraphs <p>, lists <ul> and <ol>, tables <table>, images <img> (which should carry alt text for accessibility), and links <a>.
CSS — presentation and style
CSS (cascading style sheets) defines how it looks: fonts, colours, sizes, spacing, borders and positioning. CSS can be applied three ways: inline (on a single element), internal (in the page's head), or external (a separate .css file linked to many pages). External is strongly preferred.
Why separate them — the exam question
Keeping structure and presentation apart means:
- One external stylesheet controls many pages, so the whole site's appearance changes by editing one file;
- The site stays consistent across every page;
- HTML files are smaller and load faster, since styling is not repeated in each one;
- The same content can be presented differently for screen, print or mobile;
- Accessibility improves, because meaningful structure helps screen readers.
It is the same argument as using styles in a word processor, applied to a whole website.
Think of it like this
HTML is the skeleton and CSS is the clothing. You can change the outfit completely without rebuilding the skeleton — and one wardrobe can dress a hundred identical mannequins at once.
Worked examples
Method, step by step
A website has 50 pages, all using one external stylesheet. The owner wants to change the heading colour on every page. Explain why this is quick.
- 1The heading colour is defined once in the external CSS file, not in each HTML page.
- 2All 50 pages link to that same stylesheet.
- 3Editing the single colour rule in the CSS file therefore changes the appearance of every page immediately.
Because the styling is held in one external stylesheet shared by all 50 pages, changing the heading colour rule once in that file updates every page at once, rather than editing 50 separate files.
Common misconceptions
- Using HTML to control appearance, e.g. choosing a heading tag because it "looks big". Heading levels convey structure; size is CSS's job.
- Thinking inline styles are simplest and therefore best. They defeat the whole purpose, since each element must then be edited individually.
- Believing CSS holds content. CSS never contains page content; it only describes presentation.
In the exam
- For "why separate content and presentation", give at least two of: one edit changes the whole site, consistent appearance, smaller/faster pages, and easier adaptation for different devices.
- Remember alt text on images as an accessibility point — it is a reliable mark in questions about visually impaired users.