Every website you open is built from a language called HTML. Today you build your first web page by snapping blocks together, then reading the real HTML tags those blocks write. You will leave with a page that has a heading, paragraphs, a list and a link.
Keep this tight. Devices should be ready before the bell so the build starts on time. No predict beat yet: there is nothing on screen to predict against until the interactive opens.
A web page is not a picture. It is a set of tags that tell the browser what each part is: this is a heading, this is a paragraph, this is a list, this is a link.
The language of those tags is called HTML (HyperText Markup Language). You will snap blocks to build the page, then open the HTML tab after each block to see the tag it wrote.
Board beat only. Put the four common pieces on the board once: heading, paragraph, list, link. Show the diagram: blocks write tags, tags become the page. Do not lecture tag names yet. Students will discover them in the builder. Move straight into the hands-on so the room is building within a few minutes of the start.
Open the Web Page Builder. You start with an empty page called Home. Build the page with blocks, and after each block open the HTML tab and find the tag it just wrote.
Checklist (tick each off as you go):
- Heading: added, and you found its tag
- Paragraphs: two added, and you found their tags
- List: three items, and you found both tags (whole list and each item)
- Link: works, and you found its tag
- Add a heading block. Open the HTML tab. Find the heading tag and say its name.
- Add two paragraph blocks with a sentence in each. Find the paragraph tags in the HTML tab.
- Add a list with three items. Open the HTML tab. You should spot a tag for the whole list and a tag for each item. Name both.
- Add a link block.
- Write the words people click as the link text.
- Open the site in a new tab, copy the full address from the bar at the top (it should start with https://), and paste it into the address field. Try your school site or a sports club.
If you finish early, you may add a picture from the gallery and find the image tag in the HTML tab. That is optional stretch, not required today.
Your work saves against this step, so the page will still be here when you come back.
Interactive activity
Expected tags students should name: heading → h1; paragraph → p; list → ul (whole list) and li (each item); link → a. Optional picture → img.
Blocks only today. Code editing is locked. The HTML pane is readable so students can hunt for tags, but they cannot type in it yet.
Core path only: heading, two paragraphs, a three-item list, one working link. Picture is extension for early finishers, not part of the main path.
Suggested timing
- First 4 minutes: heading and paragraphs together as a class, with the HTML tab open on the board after each block. After the heading block, pause and ask: What tag did that block just write? Same beat for paragraph.
- Next few minutes, still as a class: add the list block together. Open the HTML tab and name the list tags as a pair before anyone works alone: one tag wraps the whole list, and one tag marks each item. Wait until the room can name both before releasing.
- Then model one full link on the board. Type the link text, open a site in a new tab, copy the full https:// address from the browser bar, paste it, click the preview to show it works, then open the HTML tab and find the link tag together. A link block has two fields (text and address); without this quick model the room often stalls.
- Remaining time: students finish their own list and link independently while you circulate. Picture only if someone is done early.
Teaching tips
The goal is the mapping, not a polished page. Common snag: students add blocks but never open the HTML tab. Nudge them after every block: Show me the tag. Point them at the on-screen checklist so they tick each mini-goal instead of holding the whole path in mind.
Common snag on links: students type only the site name and get a dead link. Show them how to copy from the browser address bar. Insist the address field starts with https:// and check the preview once before they move on.
Differentiation
If someone finishes early, offer the optional picture, or challenge them to predict the next tag before they look. If someone is stuck, sit with them and add one block together, then read the HTML side by side.
Open the same Web Page Builder page you saved in the last step. Keep the same blocks and structure. Change only the words so the page is about something you care about: a hobby, a team, a game, a place.
Done looks like this:
- The heading names your topic in your own words
- At least two paragraphs say something real about it
- The list has three items that belong to your topic
- There is one working link (link text plus a full https:// address)
- You can point to the HTML tag for each thing on the page
You do not need to rebuild the page from scratch. Edit the text in place, check the link still works, then open the HTML tab one more time and match each part to its tag.
Students should reopen the Home page they built in the previous step and edit it in place. No structural rebuild is required: same kinds of blocks, new words.
If a student's page is missing (shared device, cleared browser data), they rebuild the same structure quickly. They need a heading, two paragraphs, a three-item list and one working link. Then they personalise the text.
Circulate and ask one check question only: Show me the tag for your heading (or list, or link). If they can point to it, the outcome is met.
Content can be light; the learning is the block-to-tag mapping. A page about a GAA club, a favourite game, or the school is all fine.
Remind them the page saves against the step. They will extend this page next time, so they should leave content they are happy to build on.
You did not type HTML today, but you read it. Every block you snapped wrote a real tag, and the browser used those tags to build the page you saw.
The tags you met: h1 for a main heading, p for a paragraph, ul and li for a list (one wraps the whole list, one marks each item), a for a link. Next time you will give the page more structure, and you should be able to predict the tag before you look.
Quick board recap of the core tags only. Cold-call two students: one names the tag for a heading, one for a link. If time allows, ask one student to name both list tags as a pair. Do not drift into CSS or multi-page sites; that is later.
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.