← ACARA Digital Technologies Years 9–10

Sorting webpage components into layers

Every part of a page is content (words, images), structure (tags), presentation (CSS colour, layout) or behaviour (JavaScript). Each layer can be changed on its own.

Part of: ACARA Digital Technologies Years 9–10 — Content, Structure and Presentation — Module 5, QCE Digital Solutions Unit 3 — Interactions Between Users, Data and Digital Systems — Module 39

Understanding Sorting webpage components into layers in ACARA Digital Technologies Years 9–10

What it does: JavaScript that responds to user actions is the behaviour layer, like the electrics in a house. The a tag and its href attribute define where the link goes, so this is structure. The word Shop is content. The words and pictures are content. The <h1> tag around them is structure, because it labels the words as a main heading. Tags label what the content is, so they are structure. 'Our Team' is the content. Colour, fonts and layout rules are presentation. They change how the page looks, not what it says. Each layer is designed and changed on its own, so a new stylesheet can restyle a page and leave the words and tags untouched.

Common mistakes: A link's destination is part of the structure layer and is set with the href attribute. src is used for images and scripts, so it should be <a href="pets.html">More</a>. Font size is presentation, written in CSS as property: value. The colon is missing, so it should be font-size: 32px;.

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 Sorting webpage components into layers to a class →

This module's key terms are also in a printable crossword (Modules 116–154) and word search (Modules 116–225).

Take this worksheet further — free with Cloodit

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

Learning

Duo

The words 'Welcome to our school' inside an <h1> tag: which layer are the words themselves?

StructureContent

Matches

<h1 style="color: red;">Sale</h1> (said to be only structure)

↓

The colour red is presentation, not structure. Only the h1 tag is structure and the word Sale is content.

Applying

Meanings

Term

web page layers

Meaning

Every part of a page is content (words, images), structure (tags), presentation (CSS colour, layout) or behaviour (JavaScript). Each layer can be changed on its own.

Practice

<style>

Testing

Gaps

<>Welcome</h1>

Check Answer

Spots

2<p>Rex is a dog.</p>

3<a src="pets.html">More</a>

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

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. The words 'Welcome to our school' inside an <h1> tag: which layer are the words themselves?

A. Content ✓

B. Structure

The words and pictures are content. The <h1> tag around them is structure, because it labels the words as a main heading.

2. Which part of <h1>Our Team</h1> is the structure layer?

A. The <h1> tags ✓

B. The words Our Team

Tags label what the content is, so they are structure. 'Our Team' is the content.

3. p { color: blue; } changes the font colour. Which layer is that?

A. Presentation ✓

B. Content

Colour, fonts and layout rules are presentation. They change how the page looks, not what it says.

4. In <a href="shop.html">Shop</a>, the destination shop.html tells the browser where the link goes. Which layer is the link itself?

A. Presentation

B. Structure ✓

The <a> tag and its href attribute are structure because they mark the text as a link. The word Shop is content.

5. A script shows a pop-up message when a user clicks a button. Which layer does the script belong to?

A. Presentation

B. Behaviour ✓

JavaScript that reacts to the user is behaviour. CSS only controls how things look.

Match the Pairs

<h1>Welcome</h1> → The h1 tag is structure: it labels the text as the main heading. The word Welcome inside it is content.

p { color: navy; } → Presentation: a CSS rule that decides how paragraph text looks, without changing the words or the tags.

Behaviour layer: a script reacts when the user clicks a button → button.onclick = function() { alert('Hi'); };

Structure layer: a link's destination is set by a tag attribute → <a href="shop.html">Shop</a>

<h1 style="color: red;">Sale</h1> (said to be only structure) → The colour red is presentation, not structure. Only the h1 tag is structure and the word Sale is content.

h1 { text-align: center; } (said to be content) → A CSS rule that centres text is presentation, not content. Content is the words and images themselves.

Key Term

web page layers

Every part of a page is content (words, images), structure (tags), presentation (CSS colour, layout) or behaviour (JavaScript). Each layer can be changed on its own.

Fill in the Blanks

1. <h1>Welcome</h1>

Hint: Type the tag name that gives structure by labelling this text as the main heading.

2. p { color: blue; }

Hint: Type the CSS property that sets the text colour, which is part of the presentation layer.

3. <a href="shop.html">Shop</a>

Hint: Type the attribute that stores the link's destination, which is part of the structure.

4. <script>alert("Hi");</script>

Hint: Type the tag name that holds code for the behaviour layer, which reacts to the user.

5. body { background-color: navy; }

Hint: Type the CSS property that changes the page's background, a presentation layer choice.

Spot the Error

Question 1

A <h1>My Pets</h1>

B <p>Rex is a dog.</p>

C <a src="pets.html">More</a>

Line C — A link's destination is part of the structure layer and is set with the href attribute. src is used for images and scripts, so it should be <a href="pets.html">More</a>.

Question 2

A h1 {

B color: navy;

C background: #eef;

D font-size; 32px;

E }

Line D — Font size is presentation, written in CSS as property: value. The colon is missing, so it should be font-size: 32px;.

Question 3

A <body>

B <h2>Our House</h3>

C <p>Bricks hold it up.</p>

D </body>

Line B — The heading's tags are structure and must match. An h2 opens with <h2> and must close with </h2>, not </h3>.

Question 4

A <button id="btn">Hi</button>

B <script>

C btn.onclick == function() {

D alert("Hello!");

E };

F </script>

Line C — JavaScript is the behaviour layer, reacting to clicks. The handler is assigned with a single =, so it should be btn.onclick = function() {.

Question 5

A <style>

B p { color= green; }

C </style>

D <p>Grass is green.</p>

Line B — Colour is presentation, set in a CSS rule. A declaration uses a colon, so it should be p { color: green; }.

Student with a class code? Join your class →