HTML for Kids: A First Lesson and Where to Practise

By Hugo Corbett · November 13, 2026 · 7 min read

HTML is a good first coding language for kids because every change shows up straight away: type a heading, save, and it appears on the page. Start with four tags, a heading, a paragraph, an image and a link, and let the child build a page about something they love. Grammar and theory can wait.

This guide has a first lesson you can run in half an hour, five small projects that build on it, and a comparison of the places children can write and share HTML. The comparison focuses on one question that matters more in a classroom than at home: does each child need an account, and who has to create it?

Why HTML works as a first language

Most first coding lessons for children use blocks, as in Scratch, and that is a fine place to begin. HTML is a good next step, or a first step for older children, for three reasons.

• It is visible. There is no hidden logic to explain. What the child types is what the page shows.
• Mistakes are gentle. A missing closing tag makes the page look odd; it does not crash anything. Finding the mistake by looking at the page is a useful skill in itself.
• The result is real. A web page is something children recognise, and something they can show their family with a link.

Children who read and type comfortably usually manage fine. Younger ones can still take part if an adult types while they decide what goes on the page.

A first lesson: "All about me"

The goal is a page about the child, or about a favourite animal, game or place. Open the example below in HTMLpad, where it can be edited and the result appears beside the code.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>All about cats</title>
</head>
<body>
  <h1>All about cats</h1>
  <p>Cats sleep for about twelve to sixteen hours a day.</p>
  <h2>My favourite cat</h2>
  <p>My favourite cat is <strong>Biscuit</strong>, who lives next door.</p>
  <img src="https://picsum.photos/id/40/400/300" alt="A grey cat looking at the camera" width="400" height="300">
  <p><a href="https://en.wikipedia.org/wiki/Cat">Read more about cats</a></p>
</body>
</html>

Try this example in HTMLpad

Run it in four steps:

1. Change the words. Ask the child to replace the heading and the sentences with their own topic. Nothing else. They see that the words between the tags are what the page shows.
2. Spot the pairs. Point out that <h1> opens and </h1> closes. Ask them to find the other pairs. Then remove one closing tag on purpose and look at what happens.
3. Add something. A second <h2> and paragraph, or a list. Each addition copies a pattern they have already seen.
4. Share it. Save the page and send the link to someone. This is the moment most children remember.

Keep the first lesson to these tags. Colours and layout are the reward for the second lesson, not the first.

Five projects that build on it

Each project adds one or two new ideas and keeps the rest familiar.

The quiz in project 5 works with HTML alone, which surprises most children:

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Space quiz</title>
<style>
  body { font-family: system-ui, sans-serif; margin: 2rem; }
  details { margin: 1rem 0; padding: .6rem .9rem; border: 2px solid #f25438; border-radius: 10px; }
  summary { font-weight: 600; cursor: pointer; }
</style></head>
<body>
  <h1>Space quiz</h1>
  <details><summary>Which planet is closest to the Sun?</summary><p>Mercury.</p></details>
  <details><summary>What is the Moon made of?</summary><p>Mostly rock.</p></details>
  <details><summary>How many planets are in our solar system?</summary><p>Eight.</p></details>
</body>
</html>

Try this example in HTMLpad

For the styling in project 3, the guide on how to link CSS to HTML explains the options; for children, keeping the CSS in a <style> block inside the page is simplest. Project 4 uses the link basics in HTML link code.

Where kids can write and share HTML

At home, a child can use almost anything. In a classroom, accounts are the obstacle: many children have no email address, and creating thirty accounts eats the lesson. This is how the main options compare, checked in November 2026.

A text editor and a browser. Notepad or TextEdit, save as .html, double-click to open. No internet account at all, which makes it a good way to show that a web page is just a file. The guide to opening HTML files covers the details. The catch is that nothing can be shared without hosting.

HTMLpad class links. I should be clear that this is our tool. The teacher creates a class link and shares it; children type their first name and save, and every page appears on one class page. Nobody signs up. Pads stay online for 90 days, so it suits lessons and projects rather than permanent sites. The teachers' page explains the setup.

Code.org Web Lab. Code.org's Web Lab is part of its free curriculum. Code.org's help centre explains that teachers create the student accounts, with picture passwords or secret words, so children need no email address. It is the most structured option, with lessons built around it.

Khan Academy. Khan Academy's computing courses include HTML and CSS with an editor beside each lesson. Its help centre lists three routes for under-13s: a parent creates the account, a teacher does, or the child signs up with a parent's approval.

Trinket. Trinket was a popular choice for teaching HTML. The original service has wound down and its software is now open source, with a free community edition run by Strive Math at trinket.strivemath.org.

Glitch, another old favourite, stopped hosting projects in July 2025, so older lesson plans that link to it need updating.

Keep children's pages safe

A page with a link can be opened by anyone who has that link. Before children publish, agree a few rules:

• First names only. No surnames, school names, addresses or ages.
• No photos of themselves. Use drawings, or photos of objects and animals.
• Links stay in the class. Share them with family by message, not on public social media.

On HTMLpad, pads are not indexed by search engines and the class page is not listed anywhere, but the rules above are good habits wherever children publish.

Tips from the classroom

• Let them copy, then change. Starting from a working example and changing it is how most adults learn HTML too.
• Break things on purpose. Removing a closing tag and finding the problem teaches more than a page of rules.
• Show, then share. Ten seconds of each child's page on the big screen does more for motivation than any grade.
• Remix instead of starting over. On HTMLpad, every pad has a Remix link, so you can publish a starting page and let each child build their own version.

For more on editing pages, see how to edit an HTML file.

Frequently asked questions

What age can kids start learning HTML?

Once a child reads and types comfortably, they can write simple HTML. Younger children can take part by choosing the content while an adult types. Block-based coding, such as Scratch, is a good step before it.

Is HTML easier than other programming languages for kids?

It is easier to start with, because there is no logic to plan: the page shows what you type. Strictly, HTML is a markup language rather than a programming language, which is part of why it suits beginners.

Can kids learn HTML without creating an account?

Yes. A text editor and a browser need no account at all, and class links on HTMLpad let children save and share pages by typing only their first name. Code.org and Khan Academy need accounts, but teachers or parents create them without children needing an email address.

What should a child's first HTML page be about?

Something they care about: a pet, a game, a sport or a place. Interest carries them through the typing, and a page about their own topic is one they want to show people.