Keeping content, structure and presentation apart lets each change on its own: one style sheet restyles a whole site, the same page fits a phone or a laptop, and a screen reader can tell a blind reader what each part is. A page that fakes its structure with looks works for nobody but sighted readers.
Two pages look almost the same. To a blind student using a screen reader, one of them has no headings at all. How?
Builds on:Three layers(Digital systems › How a web page is made)
In Three layers each layer could change on its own. That isn't just tidy: it decides who can use a page, on what device, and how much work it takes to change a whole site.
Predict: Read the problem and decide what you think before you try anything. A wrong guess is fine: it shows you what to look for.
Try: Try it on the board and compare the result with your prediction.
Investigate: Work out why it happens, one step at a time.
Modify: Change the problem on purpose and see what happens.
Practise: A few on your own, to check you have it.
Make: Make your own problem using what you have learned. Expect a few tries; that is normal.
Make your prediction first. Help opens once you've locked it in.
PredictRead the problem and decide what you think before you try anything. A wrong guess is fine: it shows you what to look for.
What the screen reader says
TryTry it on the board and compare the result with your prediction.
Try: listen to both pages
Was your prediction right?
Try it yourselfYour edits are saved in this browser.
Turn on the screen reader and listen to Page A, then Page B. What is missing from Page B?
Use the board. This ticks when you get there.
InvestigateWork out why it happens, one step at a time.
Worked example: three reasons
Worked exampleBefore each step, say what you think comes next.
a whole siteOne style sheet styles every page: change a rule once, every page changes.
a phoneThe same content and structure; different presentation rules for a narrow screen.
a screen readerIt reads the structure aloud (headings, lists, menus) and ignores the look.
editingWriters change content, designers change presentation, without breaking each other's work.
Now count the files for the 200-page site.
A school site has 200 pages, all using one style sheet. How many files must change to make every heading green?
Sam compares Page A and Page B. Click the line where it first goes wrong.
ModifyChange the problem on purpose and see what happens.
Vary: one change, many effects
Try it yourselfYour edits are saved in this browser.
Change one rule in the style sheet so the headings change colour. Watch the other pages of the site.
Use the board. This ticks when you get there.
Switch to phone width. Did the content or structure change?
Use the board. This ticks when you get there.
Switch the style sheet off and the screen reader on. Does the screen reader change?
Use the board. This ticks when you get there.
PractiseA few on your own, to check you have it.
Why it matters
MakeMake your own problem using what you have learned. Expect a few tries; that is normal.
Fix Page B
Then: on a real website, use your browser's reader view. What does it keep, and what does it throw away?
Try it yourselfYour edits are saved in this browser.
Need a hint?
Turn on the screen reader: what should be headings and a list?
Another hint
Swap the bold title lines for <h1> and <h2>, and the three event lines for a <ul> with <li> items.
Another hint
Take out every <font>, <b> and <br>; the style sheet does the look.
Fix Page B's HTML: real headings and a real list, no tags used only for looks, and the same words.
Use the board. This ticks when you get there.
For teachers
Students hear two look-alike pages through a screen reader, restyle a three-page site with one CSS rule, view a page at phone width, and fix a page whose structure was faked with looks (AC9TDI10K02 node 3), with no coding needed beyond tidying tags. About 45 minutes.
I can explain why content, structure and presentation are kept apart.
I can give examples: a whole site, a phone, a screen reader.
I can fix a page whose headings and lists were faked with looks.
Before class
Try the boards yourself.
The one idea: separation lets each layer change on its own, which is what makes sites maintainable, adaptable and accessible. The accessibility point matters most to many students; a short screen reader demo (VoiceOver on a Mac or iPad, Narrator on Windows) on a real page lands it.
The board's screen reader is a simplified model: it announces headings, links, lists and landmarks, as real screen readers do, but real ones say much more.
Page B (the "messy" page) uses tags that are still found on old sites (font, b, br for layout); they work but carry no meaning.
Running the lesson
Predict: students who chose "Heading level 2" for Page B think the reader sees the look.
Try: ask a student to describe how they would find "Coming up" on Page B without seeing it.
Worked example: ask who else reads structure: search engines, translation tools, reader view.
Vary: after one rule restyles three pages, ask how that would go with 200 pages styled by hand.
Make: listen to the fixed page together in the screen reader.
The hard part (on purpose)
The Make asks students to edit HTML for the first time in this course. It is hard on purpose but small: the screen reader shows what's missing; let them use it rather than giving the tags.
When students get stuck
A student says the two pages are the same (Sam's mistake). Ask: Turn on the screen reader for both. What does each say first? Fix: Same look, different structure: not the same page for everyone.
A student's fixed page still shows tags used only for looks. Ask: Which tags are left? Which part should each be? Fix: Replace b and font with h1 or h2; turn the br lines into li items in a ul.
Stretch and support
Stretch: Look up the Web Content Accessibility Guidelines (WCAG). Find one rule that is about structure and one about presentation.
Support: A list of the structure tags they need for the Make: h1, h2, p, ul, li, nav.
Where it leads
Links: Code › HTML & CSS (sections, components and the club page put this to work); Security and privacy (what a page gives away, planned).
What each step is for
what the screen reader says: Committing to what a screen reader announces tests the new move: tools read the structure, not the look.
Try: listen to both pages: Hearing both pages through the screen reader settles the prediction: same look, different structure, different experience.
Worked example: three reasons: Working through three situations models the new move: each benefit comes from one layer changing while the others stay. Sam judges a page by its look, the misconception planted after the method.
Vary: one change, many effects: Each task changes one thing and watches what follows: one CSS rule across a site, the screen width, then the style sheet off with the screen reader on.
why it matters: Explaining separation in new situations is the same move in mixed forms, plus a review of the three layers.
fix Page B: Repairing a page whose structure was faked with looks reverses the process: from what each part should be to the tags that say so.
Now you can
Explain why content, structure and presentation are kept apart.
Give examples: a whole site, a phone, a screen reader.
Fix a page whose headings and lists were faked with looks.