Home›Lesson Plans›Computer Science›Web Development · Grade 7

HTML Basics

Seventh graders learn HTML — the tags that structure every web page. The h1 tag makes a heading, the p tag a paragraph, the a tag a link. They match tags to what they do, then build a simple page.

Grade 7HTML Basics50 minutes1 class periodCSTA / ISTEExplicit teaching4 StandardsCSTA
Start the Lesson
Assign or share this lesson
Share to Google Classroom Share to Microsoft Teams

Copy link works with Canvas, Schoology, Moodle and any other LMS — paste it in as a resource or assignment.

Lesson at a Glance

Everything you need before the bell rings

Learning Objectives

Students will be able to…

  • ✓Read common HTML tags.
  • ✓Match tags to what they do.
  • ✓Nest tags to structure content.
  • ✓Build a simple page.
Essential Question

How do HTML tags build the structure of a web page?

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 the tag, then tap its job.

🏷️ Match each HTML tag to what it doesTry it
HTML tag
What it does
Now tap its job!
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 the Page

6 min

What is a web page actually made of?

👩‍🏫 Teacher Moves

  • Show a page and its code.
  • Ask what the tags do.
  • Set the goal.

🎒 Student Actions

  • Look.
  • Guess.
  • Get ready.
2

Use — HTML Basics

12 min

Students use tags.

👩‍🏫 Teacher Moves

  • Send students to Match the HTML Tag.
  • Match each one.
  • Note tags structure content.

🎒 Student Actions

  • Match.
  • Say.
  • Note it.
3

Modify — Change the Page

13 min

Students modify.

👩‍🏫 Teacher Moves

  • Change a heading’s text.
  • Add a paragraph.
  • Add a link.

🎒 Student Actions

  • Change.
  • Add.
  • Add.
4

Create — Build a Page

13 min

Students create.

👩‍🏫 Teacher Moves

  • Add a heading, a paragraph, a list.
  • Add one image and one link.
  • Preview it.

🎒 Student Actions

  • Add.
  • Add.
  • Preview.
5

Reflect — Reflect

6 min

Students close.

👩‍🏫 Teacher Moves

  • Name a tag and its job.
  • Say what HTML is for.
  • Complete the exit ticket.

🎒 Student Actions

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

Built to the standards you report on

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

CSTA
2-AP-16

Incorporate existing code and media, with attribution.

CSTA
2-AP-19

Document a program so others can follow it.

CSTA
2-AP-10

Use flowcharts/pseudocode to plan structure.

ISTE
6 Creative Communicator

Publish content for an audience.

Differentiation

One lesson, every learner

Multilingual Learners

ELL / EMERGING READERS
  • Tag-and-job cards.
  • Label a printed page.
  • Read tags aloud.

Support & Access

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

Stretch & Extend

GIFTED / EARLY FINISHERS
  • Nest a list in a page.
  • Add a table.
  • Validate the HTML.
Materials

What to gather

  • 📽️Screen / board
  • 🏷️Tag & job cards
  • 💻Match the HTML Tag
  • 🌐A code editor
  • 📓Notebooks
  • 🎫Exit-ticket slips
Vocabulary

Key terms — hover for a quick definition

HTMLthe language that structures web pagestaga keyword in angle brackets that marks contentelementa tag plus its contentheadinga title, from h1 (biggest) downparagrapha block of text (p tag)linkclickable text to another page (a tag)attributeextra info inside a tagnestingputting elements inside elements
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 make?
A big main heading.
QUESTION 2
What does the a tag make?
A link to another page.
QUESTION 3
What is HTML for?
Structuring the content of a web page.

Reflect: HTML basics.

Have students list 3 tags and what each does. A printable HTML worksheet 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.

🃏 CS HTML Basics (Grade 7)Flip
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.

📝 CS HTML Basics (Grade 7)Quiz
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.

🖨️ CS HTML Basics (Grade 7)Print
Name: ________________________
Date: ____________

Part A · Write the word that matches each meaning

Word bank: attribute, element, heading, HTML, link, nesting, paragraph, tag
  1. extra info inside a tag
  2. a tag plus its content
  3. a title, from h1 (biggest) down
  4. clickable text to another page (a tag)
  5. putting elements inside elements
  6. the language that structures web pages
  7. a block of text (p tag)
  8. a keyword in angle brackets that marks content

Part B · Show what you learned

  1. What does the h1 tag make?
  2. What does the a tag make?
  3. What is HTML for?
Answer key — Part A: 1) attribute · 2) element · 3) heading · 4) link · 5) nesting · 6) HTML · 7) paragraph · 8) tag
Part B: 1) A big main heading. 2) A link to another page. 3) Structuring the content of a web page.