Computer Science · Grade 9

Active learning ideas

HTML: Structuring Web Content

Active learning works well for HTML structuring because students need hands-on experience to see how tags shape content logically. Writing and debugging code together builds muscle memory for valid structures that match real-world web pages they use daily.

• Ontario Curriculum Expectations
• CS.HS.AP.10
• CS.HS.N.8

• 25–45 min
• Pairs → Whole Class
• 4 activities

Activity 01

• Project-Based Learning
• 35 min · Pairs

Pair Programming: Simple Portfolio Page

Partners take turns as driver and navigator to code an HTML page with a <header> containing <h1> name and <nav> links, a <main> section with <p> bio and <ul> skills list, plus a <footer> with contact info. Validate nesting, then preview in browser and refine semantics. Switch roles after 15 minutes.

Explain the purpose of common HTML tags in structuring web content.

Facilitation Tip

During Pair Programming: Simple Portfolio Page, ensure pairs alternate roles every 10 minutes to keep both partners engaged and accountable for the code.

What to look for

Present students with a short HTML code snippet. Ask them to identify the type of element each tag represents (e.g., heading, paragraph, image) and whether it is a block-level or inline element. For example: 'In the code `<h1>My Title</h1> <p>Some text.</p>`, what type of element is `<h1>` and is it block or inline?'

• Apply
• Analyze
• Evaluate
• Create
• Self-Management
• Relationship Skills
• Decision-Making

Activity 02

• Project-Based Learning
• 45 min · Small Groups

Small Groups: Broken Code Fix-Up

Distribute printed HTML snippets with errors like mismatched tags or poor semantics. Groups identify issues, rewrite correctly on laptops, and test renders. Present one fix to class, explaining semantic improvements.

Design a basic web page using appropriate HTML elements.

Facilitation Tip

For Small Groups: Broken Code Fix-Up, provide printed code snippets with clear errors so groups must annotate line numbers and explain fixes aloud.

What to look for

Provide students with a simple wireframe sketch of a basic webpage (e.g., a title, an image, a short paragraph). Ask them to write the HTML code for this structure, ensuring correct tag usage and nesting. Collect these to check for understanding of basic element creation.

• Apply
• Analyze
• Evaluate
• Create
• Self-Management
• Relationship Skills
• Decision-Making

Activity 03

• Project-Based Learning
• 30 min · Whole Class

Whole Class: Live Tag Dissection

Display a simple website source code via projector. Class calls out tags and purposes verbally, then replicates sections individually before combining into a full page. Discuss accessibility benefits.

Critique the semantic correctness of a given HTML document.

Facilitation Tip

In Whole Class: Live Tag Dissection, display code on a large screen and ask students to call out tag functions before revealing the correct purpose.

What to look for

Display two versions of a simple HTML page: one using semantic tags like `<header>` and `<nav>`, and another using only generic `<div>` tags. Ask students: 'Which version is easier to understand for both humans and machines, and why? What are the benefits of using semantic HTML?'

• Apply
• Analyze
• Evaluate
• Create
• Self-Management
• Relationship Skills
• Decision-Making

Activity 04

• Project-Based Learning
• 25 min · Individual

Individual: Semantic Wireframe Build

Provide page wireframes; students code matching HTML using semantic tags. Self-assess against rubrics for structure and validity before peer review.

Explain the purpose of common HTML tags in structuring web content.

Facilitation Tip

For Individual: Semantic Wireframe Build, give students graph paper to sketch wireframes first, then translate to HTML to reinforce structure before styling.

What to look for

Present students with a short HTML code snippet. Ask them to identify the type of element each tag represents (e.g., heading, paragraph, image) and whether it is a block-level or inline element. For example: 'In the code `<h1>My Title</h1> <p>Some text.</p>`, what type of element is `<h1>` and is it block or inline?'

• Apply
• Analyze
• Evaluate
• Create
• Self-Management
• Relationship Skills
• Decision-Making

A few notes on teaching this unit

Teach HTML structure by modeling attention to detail: show how a missing closing tag breaks a page, and use real websites as examples of semantic tags in action. Avoid rushing to CSS or JavaScript; focus on clean, valid HTML first. Research shows that students retain structural concepts better when they debug their own errors and see immediate consequences.

Students will move from identifying tags to building valid HTML documents with proper nesting and semantic accuracy. They will explain why each tag or element matters and adjust code based on feedback or constraints.

---

Watch Out for These Misconceptions

• During Pair Programming: Simple Portfolio Page, watch for students who assume styling tags belong in HTML files.

  Have pairs compare their raw HTML output in a browser with no styles to a styled version, then circle tags they added that are not structural. Ask them to remove any presentation-related tags to clarify the separation.

• During Small Groups: Broken Code Fix-Up, watch for students who believe tag order and nesting do not affect rendering.

  Provide code with broken nesting, such as a <p> tag inside a <ul> without an <li>. Groups must rearrange tags and explain why the original failed to render properly, reinforcing logical hierarchy.

• During Whole Class: Live Tag Dissection, watch for students who dismiss semantic tags as unimportant extras.

  Display two versions of the same page: one with semantic tags and one with generic <div> tags. Use browser dev tools to show how screen readers navigate each, making the real-world impact visible to students.

---

Methods used in this brief

• Project-Based Learning