HTML Lesson Plan for Grades 5–6: Build Your First Webpage

Help Grade 5–6 pupils build a small webpage about an imaginary school club. This introductory HTML lesson uses a local file, so children can practise without publishing personal information online.

Time: 40 minutes. Requirements: a computer with a plain-text editor and a web browser; one device per pair is sufficient. The activity works offline. Learning goal: use headings and paragraphs, save an HTML file and test a simple change.

Before the lesson

Create a folder for the activity. On Windows, use Notepad or another plain-text editor, rather than a word processor. Have pupils use a fictional club name and avoid real names, photographs, addresses and contact details.

Explain that HTML describes the structure of a webpage. It is a markup language: tags identify elements such as headings and paragraphs. The browser interprets these tags when it displays the file.

1. Read a tiny webpage — 8 minutes

Show these lines and ask pupils to predict what the browser will display:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Our Coding Club</title>
</head>
<body>
<h1>Welcome to Our Coding Club</h1>
<p>We enjoy puzzles and making things.</p>
<h2>Our next activity</h2>
<p>We will design a maze on paper.</p>
</body>
</html>

Point out the opening and closing tags. The title appears in the browser tab; the h1 appears on the page. The h2 introduces a section beneath the main heading. The p element marks a paragraph.

2. Create and open the file — 12 minutes

Ask pupils to type the example into the editor. Save it as club.html. In Notepad’s Save As window, select All files so the editor does not append .txt, and choose UTF-8 encoding if prompted. Open the saved file in the browser.

If the browser displays the code as text, check the filename and file extension. If text is missing or looks wrong, compare the opening and closing tags with the example. Encourage pairs to read one line at a time.

3. Make a change and test — 10 minutes

Each pair changes the fictional club name and adds a second activity paragraph. Pupils must save the file, return to the browser and refresh the page. Ask them to explain which action changes the file and which action updates the browser view.

Then change the h2 text without changing its tags. Compare the result. Emphasise that content can change while the page’s structure remains the same.

4. Find and fix a bug — 5 minutes

Show <h2>Our activities</h1>. Ask pupils which closing tag belongs with the opening tag.

Answer: use </h2>. A browser may still show something when markup is incorrect; a page appearing on screen does not prove that every tag is correct.

5. Check understanding — 5 minutes

Ask each pupil to explain the difference between title and h1, add a paragraph, and describe how to view a saved change. Assess the resulting page and the explanation, rather than typing speed.

Support: provide the starter text and ask pupils to edit two sentences. Challenge: ask pupils to add another h2 section with two paragraphs and explain the heading order. Keep CSS, forms and online publishing for a later lesson.

Explore more free coding lesson plans, see our Grade 1–6 curriculum, or request resources for your school.