← Years 9–10 Data & Information

Why separating content, structure and presentation matters

Keeping content, structure (HTML) and style (CSS) apart so one document can be restyled fast, suit any screen, and be understood by search engines and screen readers.

Part of: 9-10 Digital Technologies: Representing online documents — Module 18, ACARA Digital Technologies Years 9–10 — Content, Structure and Presentation — Module 3

Understanding Why separating content, structure and presentation matters in Years 9–10 Data & Information

What it does: The h1 tag marks meaning and structure. Machines read the tag, while the size and colour are left to CSS. A CSS media query adapts presentation to the screen size, so the same HTML works on many devices. One shared stylesheet means a single change restyles every page that links to it, which gives consistent styling across many pages. Screen readers use the HTML structure to announce headings and let users jump between them. Styling alone gives no meaning. A page can look right to a sighted reader but be meaningless to a screen reader or search engine if the structure is missing.

Common mistakes: A link tag uses href to point to the stylesheet, not src. Without href, the separate CSS file is never loaded, so the page loses its styling. CSS declarations use a colon between property and value, not an equals sign. It should be font-family: Arial; so every h1 on every page matches.

Class: _____________________  ·  Name: _____________________  ·  Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Why separating content, structure and presentation matters to a class →

This module's key terms are also in a printable crossword (Modules 17–51) and word search (Modules 6–132).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning
Duo
A school website has 200 pages. The school wants to change its heading colour on every page. Which approach follows separation of concerns?
Change one rule in a shared CSS stylesheetEdit the colour inside each of the 200 HTML pages
Matches
<p><font color="red" size="6">Sale ends Friday</font></p>
↓
Presentation (colour and size) is mixed into the HTML. Restyling many pages means editing every tag. Use a CSS rule or class instead.
Applying
Meanings
Term
separation of concerns
Meaning
Keeping content, structure (HTML) and style (CSS) apart so one document can be restyled fast, suit any screen, and be understood by search engines and screen readers.
Practice
<style>
Testing
Gaps
< rel="stylesheet" href="style.css">
Check Answer
Spots
2<link rel="stylesheet"
3 src="style.css">

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

The 'Armadillo' badge — Shield Bearer, one of Cloodit's 106 collectible badges
Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy
Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games
Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print
Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. A school website has 200 pages. The school wants to change its heading colour on every page. Which approach follows separation of concerns?
A. Edit the colour inside each of the 200 HTML pages
B. Change one rule in a shared CSS stylesheet ✓
One shared stylesheet means a single change restyles every page that links to it, which gives consistent styling across many pages.
2. Which choice helps a screen reader user understand a page's layout?
A. Marking up headings with h1 and h2 tags ✓
B. Making headings look big with large bold CSS on a plain div
Screen readers use the HTML structure to announce headings and let users jump between them. Styling alone gives no meaning.
3. True or false: Search engines mostly rely on how a page looks, such as colours and fonts, to work out what it is about.
A. False: they read the structure and content, like headings and links ✓
B. True: colours and fonts tell them what the page is about
Search engines read the HTML structure (headings, lists, links) and the text. Colours and fonts are presentation and say little about meaning.
4. Your page needs to look good on both a phone and a widescreen monitor. Where should the layout changes for each screen size go?
A. In the HTML, by writing a separate copy of the content for each device
B. In the CSS, using different style rules for different screen sizes ✓
The same HTML content can be reused, while CSS adapts the presentation to different screen sizes. This avoids duplicating content.
5. Which statement describes the HTML part of a document?
A. It gives the content its structure, such as headings, paragraphs and lists ✓
B. It decides the fonts, colours and spacing of the content
HTML is for structure and meaning. CSS is for presentation like fonts, colours and spacing.

Match the Pairs

<link rel="stylesheet" href="style.css"> → Links one shared stylesheet so every page that includes it gets the same look, and a single edit restyles them all.
<img src="cat.jpg" alt="A cat asleep on a couch"> → Gives the image a text description that a screen reader can read aloud and a search engine can understand.
A screen reader and a search engine can tell this is the main heading because of its structure, not because of how big it looks. → <h1>School Sports Day</h1>
The layout can change to suit a small phone screen without touching the HTML content. → @media (max-width: 600px) { nav { display: none; } }
<p><font color="red" size="6">Sale ends Friday</font></p> → Presentation (colour and size) is mixed into the HTML. Restyling many pages means editing every tag. Use a CSS rule or class instead.
<p style="font-size:32px; font-weight:bold">Our Menu</p> → A paragraph is styled to look like a heading, so it has no heading structure. Screen readers and search engines will not treat it as a title. Use <h1> or <h2> and style it with CSS.

Key Term

separation of concerns
Keeping content, structure (HTML) and style (CSS) apart so one document can be restyled fast, suit any screen, and be understood by search engines and screen readers.

Fill in the Blanks

1. <link rel="stylesheet" href="style.css">
Hint: Type the tag that connects a page to one shared external stylesheet, so every page gets the same style.
2. @media (max-width: 600px) { p { font-size: 1.2em; } }
Hint: Type the CSS feature name that sets the widest screen the rule applies to, so small phone screens get different style.
3. <img src="dog.jpg" alt="A kelpie puppy">
Hint: Type the attribute that gives a screen reader a text description of the image.
4. <main> <h1>Recycling at School</h1> </main>
Hint: Type the heading tag for the top-level title that search engines read as the page's main topic.
5. /* One rule styles every page */ h2 { color: teal; }
Hint: Type the CSS property that sets text colour, so you can restyle all headings by editing one rule.

Spot the Error

Question 1
A <head>
B <link rel="stylesheet"
C src="style.css">
D </head>
Line C — A link tag uses href to point to the stylesheet, not src. Without href, the separate CSS file is never loaded, so the page loses its styling.
Question 2
A /* style.css */
B h1 {
C color: navy;
D font-family = Arial;
E }
Line D — CSS declarations use a colon between property and value, not an equals sign. It should be font-family: Arial; so every h1 on every page matches.
Question 3
A body {
B font-size: 18px;
C }
D @media max-width: 600px {
E p { font-size: 14px; }
F }
Line D — The media query condition must be inside brackets: @media (max-width: 600px) {. Then the style adjusts for small phone screens without changing the HTML.
Question 4
A <html lang="">
B <body>
C <h1>Library Hours</h1>
D </body>
E </html>
Line A — The lang attribute should hold a language code like en. If it is empty, screen readers can't choose the right voice and pronunciation.
Question 5
A <body>
B <b>Best Skate Parks</b>
C <h2>Melbourne</h2>
D <h2>Geelong</h2>
E </body>
Line B — Bold only changes how text looks. It should be <h1>, so search engines and screen readers know it is the main heading.

Student with a class code? Join your class →