← Years 9–10 Data & Information

Content, structure and presentation of a document

The three layers of a web page: content is the text and media, structure is the HTML that labels each part, and presentation is the CSS that controls how it looks.

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

Understanding Content, structure and presentation of a document in Years 9–10 Data & Information

What it does: Plain words are the content layer. The tags and CSS come from the other two layers. Changing a CSS rule such as this one restyles the same paragraphs without touching their text or their tags. <h1> says what the text IS (a main heading). Browsers add default styling, but the tag's job is structure. Size and boldness are controlled by CSS. CSS rules that set colour, fonts or spacing are presentation. The h1 element is structure plus content. The words stayed the same, but the label that describes their role changed, so the structure changed. The stylesheet only controls presentation. Using a different one changes how the page looks while the text and the HTML labels stay the same.

Common mistakes: The closing tag is missing its slash. Structure markup labels each part of the content, so the paragraph must end with </p>. A CSS declaration needs a colon between the property and the value. Presentation is set with color:red, not color red.

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 Content, structure and presentation of a document 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
In <p>Welcome to our school</p>, which layer is the words 'Welcome to our school'?
ContentPresentation
Matches
<p style="color: red;">Sale on now</p> (said to be 'structure')
↓
The style attribute is presentation, not structure. The p tag is the structure and the colour is the styling.
Applying
Meanings
Term
content, structure, presentation
Meaning
The three layers of a web page: content is the text and media, structure is the HTML that labels each part, and presentation is the CSS that controls how it looks.
Practice
<style>
Testing
Gaps
<>Our School Garden</h1>
Check Answer
Spots
1<h1>Skate Park Rules</h1>
2<p>Wear a helmet.<p>

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

The 'Blobfish' badge — Pressure Handler, 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. In <p>Welcome to our school</p>, which layer is the words 'Welcome to our school'?
A. Content ✓
B. Presentation
The words themselves are the content. The <p> tags are structure, and CSS would handle presentation.
2. Which layer does the <h1> tag belong to?
A. Presentation: it makes the text big and bold
B. Structure: it labels the text as a main heading ✓
<h1> says what the text IS (a main heading). Browsers add default styling, but the tag's job is structure. Size and boldness are controlled by CSS.
3. Which line is presentation?
A. <h1>Our Team</h1>
B. h1 { color: blue; } ✓
CSS rules that set colour, fonts or spacing are presentation. The h1 element is structure plus content.
4. A page keeps the same text but changes <p> to <h2> for one line. What changed?
A. The structure ✓
B. The content
The words stayed the same, but the label that describes their role changed, so the structure changed.
5. Two pages use the same HTML but different stylesheets. What is the same on both?
A. Content and structure ✓
B. Content and presentation
The stylesheet only controls presentation. Using a different one changes how the page looks while the text and the HTML labels stay the same.

Match the Pairs

<h1>Our School Fete</h1> → Structure: the h1 tag labels the text as the main heading of the page
h1 { color: navy; } → Presentation: a CSS rule that controls how every main heading looks
Content is the text and media of a page, with no tags or styling added → Our School Fete is on Saturday at 10am.
Same content and same structure can look different when you change only the presentation → p { font-family: Arial; color: green; }
<p style="color: red;">Sale on now</p> (said to be 'structure') → The style attribute is presentation, not structure. The p tag is the structure and the colour is the styling.
<h1>Contact us</h1> used only to make text big → A heading tag is for structure, not for size. Use a p tag for the text and CSS font-size to make it big.

Key Term

content, structure, presentation
The three layers of a web page: content is the text and media, structure is the HTML that labels each part, and presentation is the CSS that controls how it looks.

Fill in the Blanks

1. <h1>Our School Garden</h1>
Hint: Type the tag name that labels this text as the main heading (structure layer).
2. <p style="color: blue">Welcome!</p>
Hint: Type the attribute name that adds presentation directly to an element.
3. <ul> <li>Apples</li> </ul>
Hint: Type the tag that structures each item inside a list.
4. <!-- structure: h1 labels the title -->
Hint: Type the name of the layer that HTML tags provide.
5. h1 { color: navy; }
Hint: Type the CSS property that changes the text colour (presentation layer).

Spot the Error

Question 1
A <h1>Skate Park Rules</h1>
B <p>Wear a helmet.<p>
C <p>Be kind to others.</p>
Line B — The closing tag is missing its slash. Structure markup labels each part of the content, so the paragraph must end with </p>.
Question 2
A <h1>My Pets</h1>
B <p>I have a dog.</p>
C <p>Her name is Milo.</p>
D <p style="color red">Hi</p>
Line D — A CSS declaration needs a colon between the property and the value. Presentation is set with color:red, not color red.
Question 3
A <ul
B <li>Mon: Maths</li>
C <li>Tue: Art</li>
D </ul>
Line A — The opening tag is missing its closing > bracket. The list structure should start with <ul>, so the browser can read the list items.
Question 4
A p {
B color: green;
C font-size= 18px;
D }
Line C — CSS uses a colon, not an equals sign, between a property and its value. It should be font-size: 18px; to style how the text looks.
Question 5
A <style>
B h1 ( color: teal; )
C p { color: grey; }
D </style>
Line B — A CSS rule wraps its declarations in curly braces { }, not round brackets. The presentation rule should be h1 { color: teal; }.

Student with a class code? Join your class →