Why keep them apart

Classroom resources

Load these into Waypoints Prepare: choose Load URL and paste the copied address, or download the file and import it. In Prepare, the worksheet's Teacher edition shows the answers; the student copy hides them.

• Slides Download Copy address for Prepare Present from the browser, or export to PowerPoint or PDF.
• Worksheet Download Copy address for Prepare Print the student copy; the Teacher edition has the answers.

Students will be able to

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

Timing

Predict and Try 7 min · Worked example 10 min · Vary 10 min · Practise 6 min · Make 12 min

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

1. Predict: students who chose "Heading level 2" for Page B think the reader sees the look.
2. Try: ask a student to describe how they would find "Coming up" on Page B without seeing it.
3. Worked example: ask who else reads structure: search engines, translation tools, reader view.
4. Vary: after one rule restyles three pages, ask how that would go with 200 pages styled by hand.
5. 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

Answers to the checks

1. what the screen reader says: Page A marks "This week" with a heading tag. Page B makes it big and bold with no heading tag. Both look almost the same. What does a screen reader say for Page B?
   Just the words. A screen reader reads the structure; on Page B there is no heading to announce, so a blind reader can't jump between sections.
2. Try: listen to both pages: Turn on the screen reader and listen to Page A, then Page B. What is missing from Page B?
   
   Headings, the navigation and the list. Page B only looks structured.
3. Separation pays off: A school site has 200 pages, all using one style sheet. How many files must change to make every heading green?
   1
   One rule in one file: h2 { color: green; } restyles all 200 pages.
4. Find the mistake: Sam compares Page A and Page B. Click the line where it first goes wrong.
   line 4
   Line 4: a screen reader, a search engine and a phone layout use the structure, not the look. Page B's visitors who can't see it get no headings and no list.
5. Phone or laptop: Why can the same page appear in one column on a phone and two on a laptop?
   The presentation changes with the screen size; the content and structure stay the same
   CSS can say "on narrow screens, one column": a presentation choice.
6. A whole site: Change one rule in the style sheet so the headings change colour. Watch the other pages of the site.
   
   Every page that uses the style sheet changed at once, and no HTML was touched.
7. Phone: Switch to phone width. Did the content or structure change?
   
   No: the same words and tags, laid out narrower. The presentation adapts.
8. No style at all: Switch the style sheet off and the screen reader on. Does the screen reader change?
   
   Not at all: it never used the look. Structure is what carries meaning.
9. A site-wide change: A designer puts <font> and <b> tags all through a 50-page site to make it look right. A year later the school changes its colours. What happens?
   Someone edits all 50 pages by hand
   With the look mixed into the HTML, every page must be edited. Kept in CSS, it's one change.
10. Screen readers: Which helps a blind student most?
    Real headings and lists in the HTML
    The screen reader announces the structure, so headings and lists let them jump around the page.
11. Review: layers: Review: <nav> around the menu links is which layer?
    Structure
    It marks the part as navigation: structure.
12. fix Page B: Fix Page B's HTML: real headings and a real list, no tags used only for looks, and the same words.
    
    Now the screen reader announces the headings and the list, and the style sheet can make it look like anything. Structure first, looks second.

Solutions

One possible solution for each task. Other correct programs are fine.

Vary: one change, many effects › A whole site

Open task: any program that does what the step asks.

Vary: one change, many effects › Phone

Open task: any program that does what the step asks.

Vary: one change, many effects › No style at all

Open task: any program that does what the step asks.

fix Page B

Open task: any program that does what the step asks.

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.

Exit ticket

Give two reasons to keep a page's look in a style sheet instead of in its HTML.

For example: one change restyles a whole site; screen readers and phones use the structure, so the page works for more people and devices.

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.

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