Why separating content, structure and presentation matters

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

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

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

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

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

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

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1<link rel="stylesheet" href="style.css">		AGives the image a text description that a screen reader can read aloud and a search engine can understand.
2<img src="cat.jpg" alt="A cat asleep on a couch">		BA 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.
3A screen reader and a search engine can tell this is the main heading because of its structure, not because of how big it looks.		C@media (max-width: 600px) { nav { display: none; } }
4The layout can change to suit a small phone screen without touching the HTML content.		DPresentation (colour and size) is mixed into the HTML. Restyling many pages means editing every tag. Use a CSS rule or class instead.
5<p><font color="red" size="6">Sale ends Friday</font></p>		E<h1>School Sports Day</h1>
6<p style="font-size:32px; font-weight:bold">Our Menu</p>		FLinks one shared stylesheet so every page that includes it gets the same look, and a single edit restyles them all.

Definitions

separation of concerns

Fill in the Blanks

Complete each line of code by filling in the missing parts.

<____ rel="stylesheet" href="style.css">

@media (_________: 600px) { p { font-size: 1.2em; } }

<main> <__>Recycling at School</h1> </main>

/* One rule styles every page */ h2 { _____: teal; }

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A <head>

B <link rel="stylesheet"

C src="style.css">

D </head>

Question 2

A /* style.css */

B h1 {

C color: navy;

D font-family = Arial;

E }

Question 3

A body {

B font-size: 18px;

C }

D @media max-width: 600px {

E p { font-size: 14px; }

F }

Question 4

A <html lang="">

B <body>

C <h1>Library Hours</h1>

D </body>

E </html>

Question 5

A <body>

B <b>Best Skate Parks</b>

C <h2>Melbourne</h2>

D <h2>Geelong</h2>

E </body>

Answer Key

Why separating content, structure and presentation matters

Section A: Quick Questions

B — Change one rule in a shared CSS stylesheet

A — Marking up headings with h1 and h2 tags

A — False: they read the structure and content, like headings and links

B — In the CSS, using different style rules for different screen sizes

A — It gives the content its structure, such as headings, paragraphs and lists

Section B: Match the Pairs

<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.

Section C: Definitions

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.

Section D: Fill in the Blanks

<link rel="stylesheet" href="style.css">

@media (max-width: 600px) {
  p { font-size: 1.2em; }
}

<img src="dog.jpg" alt="A kelpie puppy">

<main>
  <h1>Recycling at School</h1>
</main>

/* One rule styles every page */
h2 { color: teal; }

Section E: Spot the Error

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.

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.

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.

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.

B — Bold only changes how text looks. It should be <h1>, so search engines and screen readers know it is the main heading.