Lesson Plan

• Describe the purpose of the content layer within the three‑layer website model.
• Identify and use key semantic HTML elements (headings, paragraphs, lists, tables, links, images, sections/articles, nav) to structure page content.
• Apply best‑practice guidelines to create accessible, well‑structured HTML content.
• Validate HTML markup to ensure compliance with web standards.

• Projector or interactive whiteboard
• Computers with internet access and a code editor (e.g., VS Code)
• Sample HTML template handout
• HTML validation tool (W3C validator) access
• Checklist of semantic elements
• Printed diagram of the three‑layer model (optional)

Show a well‑styled web page that has poorly organised markup and ask students how the underlying content might be structured and why that matters for accessibility and SEO. Explain that today they will explore the middle tier – the content layer – and will be able to demonstrate a correctly structured HTML page by the end of the lesson.

1. Do‑now (5'): Students view a poorly structured HTML page and note issues (quick check).
2. Mini‑lecture (10'): Explain the three‑layer model, focus on the content layer, and introduce key semantic elements.
3. Guided practice (15'): Build a simple page together, adding headings, paragraphs, lists, tables, links, images, sections/articles, and nav (live coding).
4. Pair activity (15'): Students create their own page using a provided template and apply the best‑practice checklist; peers review each other’s work.
5. Validation check (5'): Use the W3C validator to locate and correct markup errors.
6. Recap & Q&A (5'): Review key points and answer lingering questions.

Summarise that the content layer provides the logical skeleton of a web page, using semantic HTML to improve accessibility and SEO. For the exit ticket, each student writes one best‑practice rule they will remember. Homework: redesign a personal web‑page fragment, ensuring all content elements follow the guidelines.