Web Foundations (HTML + CSS)HTML Basics (structure + semantics)

Discussion Questions

  1. 1If a webpage had no headings or landmarks, how would a screen reader user navigate it?
  2. 2Why do you think browsers still display badly structured HTML instead of showing an error?
  3. 3How is writing semantic HTML similar to organising a well-labelled filing cabinet?
📌

Add a Padlet or Mentimeter board

Embed a shared class board for student contributions and ideas.

Padlet Mentimeter

HTML Basics (structure + semantics)

Learn the tags that make a real webpage: headings, links, images, lists, and layout structure.

⚡Quick Take· 60 sec warm-up

Before the lesson

Watch this 60-second clip for a fast vibe-check on the concept. Then dive into the full lesson below.

Video lesson· 18 min
Reading

What you're building

By the end of this unit you'll ship a personal page that looks clean and works on mobile.

HTML rules (the 5 that matter)

  1. Use headings in order: h1 then h2 then h3
  2. Use <a> for links (never just paste URLs)
  3. Use alt text on images
  4. Wrap your page in a clear structure: header, main, footer
  5. Keep your HTML readable (indentation)

Deliverable

Create a page with:

  • a title + short bio
  • a list of 3 interests
  • 2 links (one to a resource, one to your school)
  • one image with meaningful alt text

Key takeaways

  • 1HTML is structure and meaning (semantics).
  • 2Accessibility starts with headings, labels, and alt text.
  • 3Good structure makes styling 10× easier later.

Quick self-check