Home›Lesson Plans›Computer Science›Computer Science · Grade 9

HTML Basics

Ninth graders learn HTML — the language of web pages — and the common tags (headings, paragraphs, links, images, lists) that give every website its structure.

Grade 9Web Development50 minutes1 class periodUse → Modify → CreateExplicit teaching4 StandardsCSTA
Start the Lesson
Lesson at a Glance

Everything you need before the bell rings

Learning Objectives

Students will be able to…

  • ✓Explain HTML.
  • ✓Name common tags.
  • ✓Match tags to what they do.
  • ✓Build a web page.
Essential Question

Every website you’ve ever visited is built with HTML! It uses “tags” to structure a page. What are the basic HTML tags, and what do they do?

0
Lesson Phases
0
Vocabulary Terms
0
Standards Aligned
0
Interactive Task
Match It · Interactive

Match the HTML Tag

Project this and match each HTML tag to what it does — tap a tag, then tap what it does.

🌐 Match each HTML tag to what it doesTry it
Tag
What It Does
Now tap what it does!
The Lesson · Use → Modify → Create (a coding progression with Unplugged practice)

50 minutes, five moves

Tap any phase to open the teacher moves and student actions.

1

Hook — Behind Every Website

5 min

Every website is built with HTML tags — what are they?

👩‍🏫 Teacher Moves

  • Show a simple web page.
  • Ask how it’s built.
  • Set the goal.

🎒 Student Actions

  • Look.
  • Wonder.
  • Predict.
2

Unplugged — Unplug It

11 min

Students practice.

👩‍🏫 Teacher Moves

  • Label parts of a page.
  • Match tags to parts.
  • Feel the structure.

🎒 Student Actions

  • Label.
  • Match.
  • Feel it.
3

Use — Match the Tags

15 min

Students use.

👩‍🏫 Teacher Moves

  • Send students to Match the HTML Tag.
  • Match each one.
  • Explain them.

🎒 Student Actions

  • Match.
  • Explain.
  • Check.
4

Modify — Build It

14 min

Students modify.

👩‍🏫 Teacher Moves

  • Write a heading and paragraph.
  • Add a link.
  • Preview the page.

🎒 Student Actions

  • Write it.
  • Add it.
  • Preview.
5

Create — Create

5 min

Students conclude.

👩‍🏫 Teacher Moves

  • Name a tag and its job.
  • Explain HTML.
  • Complete the exit ticket.

🎒 Student Actions

  • Name one.
  • Explain it.
  • Complete the exit ticket.
Standards Alignment

Built to the standards you report on

Aligned to the CSTA K-12 Computer Science Standards and ISTE Standards for Students.

CSTA
3A-AP-16

Design and develop web content.

CSTA
3A-AP-13

Create programs with structure.

CSTA
3A-CS-02

Understand how software is structured.

ISTE
4

Innovative Designer.

Differentiation

One lesson, every learner

Multilingual Learners

ELL / EMERGING READERS
  • Tag + meaning cards.
  • Sentence frame: “The ___ tag ___.”
  • Use a page example.

Support & Access

IEP / 504
  • Start with h1 and p.
  • Match one pair at a time.
  • Use examples.

Stretch & Extend

GIFTED / EARLY FINISHERS
  • Build a full page.
  • Add CSS styling.
  • Nest tags correctly.
Materials

What to gather

  • 📽️Projector / board
  • 🌐A web-page example
  • 💻Match the HTML Tag
  • 💻A code editor
  • ✏️Pens
  • 🎫Exit-ticket slips
Vocabulary

Key terms — hover for a quick definition

HTMLthe language of web pagestagan HTML elementheadinga title on a pageparagrapha block of textlinkclickable text or imageimagea picture on a pagelistbulleted or numbered itemsweb pagea page on a website
Evaluate

Exit Ticket

Preview the three formative checks. Tap “Sample answer” to see what mastery looks like — hide them before you print for students.

QUESTION 1
What does the <h1> tag do?
Makes a big main heading.
QUESTION 2
What does the <a> tag do?
Makes a clickable link.
QUESTION 3
What is HTML?
The language used to build and structure web pages.

Create: build a page.

Have students write a few HTML tags — a heading, a paragraph, and a link — for a simple web page. A printable HTML sheet is in the Computer Science library.

Study · Flashcards

Study the key terms

Tap a card to flip it, then rate whether you knew it. Built from this lesson’s vocabulary.

🃏 HTML BasicsFlip
Card 1
Term
Tap to flip →
Meaning
0

Nice work!

Practice · Quiz

Check your understanding

A quick self-check with instant feedback, drawn from this lesson’s key terms.

📝 HTML BasicsQuiz
Score: 0
1 / 6
Question 1
0%

Nice work!

Practice · Worksheet

Printable worksheet

A print-and-go review sheet with a built-in answer key. Tap “Show answer key” to reveal answers, or print the clean version for students.

🖨️ HTML BasicsPrint
Name: ________________________
Date: ____________

Part A · Write the word that matches each meaning

Word bank: heading, HTML, image, link, list, paragraph, tag, web page
  1. clickable text or image
  2. a picture on a page
  3. the language of web pages
  4. a title on a page
  5. bulleted or numbered items
  6. an HTML element
  7. a block of text
  8. a page on a website

Part B · Show what you learned

  1. What does the <h1> tag do?
  2. What does the <a> tag do?
  3. What is HTML?
Answer key — Part A: 1) link · 2) image · 3) HTML · 4) heading · 5) list · 6) tag · 7) paragraph · 8) web page
Part B: 1) Makes a big main heading. 2) Makes a clickable link. 3) The language used to build and structure web pages.