1 - Start: What We're Building ~5 mins
Last time we talked about giving a computer clear instructions. Today we become web designers! Every web page you visit is built from HTML — code that tells the browser what to display.
By the end of the class you'll have built your own personal web page at your device: predict first, then build it, run it, and fix any bugs. Get logged in to the editor and find your partner.
Set the scene: today everyone becomes a web designer building a personal page in HTML. Keep this brief and energetic. Check all students are logged in to the editor and have a partner. Don't list any code yet — just frame the predict–build–run–fix cycle they'll follow.
2 - Predict Before You Run ~10 mins
Before anyone clicks 'Run Code', take a good look at what we're about to build.
Predict: When this code runs, what will appear in the browser? What will you see first — a heading, plain text, or nothing at all? Commit to your answer with your partner; we'll come back to it later.
This is the PRIMM predict beat. Ask: <em>What will the browser show when this runs? What appears first?</em> Collect two or three predictions and write them on the board to revisit at the make-sense step. Accept all reasonable guesses — the empty-page surprise comes later and is worth protecting now.
3 - What Is HTML? ~5 mins
HTML stands for Hyper Text Markup Language . It is the standard markup language used for creating web pages.
HTML codes the structure of a web page by using a series of HTML elements. These elements tell the web browser how to display the content of the web page. For example using HTML we can tell the web browser if something is a heading, or if it some regular text, or if it's an image, or a table, or a link etc.
Read through what HTML is and where it's used. Key question: <em>What does HTML actually tell the browser to do?</em> Draw the link to instructions and structure. For support, point to a familiar web page and ask which parts are headings versus plain text.
4 - The Structure of a Web Page ~4 mins
Each web page on the internet will have HTML code behind it that tells the web browser how to display the content.
Although web pages can display many different things, every web page will always have at least the following:
-
The
<!DOCTYPE html>that appears as the first piece of HTML code. This defines that this document is an HTML document. -
The
<html>element is the root element of a web page. -
The
<head>element contains information about the web page. -
The
<title>element contains the title for the web page (this is used to display the title in the web page's tab). -
The
<body>element contains all the content that will be displayed on the web page such as headings, text, images, videos, links etc.
Work through the basic structure of a page. Model on the board how the document opens and closes with matching tags. Key question: <em>Why does every page need this same skeleton?</em> This is a good place to name <strong>pattern recognition</strong> — every page shares the same structure.
5 - What Is an HTML Element? ~4 mins
A HTML element has a start tag, some content, and an end tag. Here are some examples:
| Start Tag | Content | End Tag |
|---|---|---|
| <h1> | Heading 1 | </h1> |
| <h2> | Heading 2 | </h2> |
| <p> | Paragraph | </p> |
| <br> |
<br>
'break' element). These elements are called empty elements and do not have an end tag.
Focus on the start tag–content–end tag pattern. Ask students to read a tag pair aloud so they hear the matching open and close. Highlight that empty elements like the break have no end tag — this catches students out later when they expect every tag to come in pairs.
Unlock the full learning experience
You're previewing this lesson. Get full access to this lesson and hundreds more — each one ready to teach, with interactive activities, printable resources and pupil progress tracking built in.
This lesson is copyright of Coding Ireland 2017 - 2025. Unauthorised use, copying or distribution is not allowed.