HTML for Kids: Build Your First Web Page in 15 Minutes

Every website you have ever visited is built with HTML. Learning it lets your child make a page about anything they love, and see it in a real browser straight away. This guide takes about fifteen minutes.

What you need

A computer, a browser, and a plain text editor such as Notepad (Windows) or TextEdit (Mac, in plain-text mode). Browser-based tools like Tiny Coderz's HTML course let you type code and see the page without saving files.

Step 1: the skeleton

Type this into a file and save it as index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Open the file in a browser. You will see "Hello, world!" as a big heading, and the tab will say "My First Page."

How tags work

HTML is made of tags in angle brackets. Most come in pairs: an opening tag <h1> and a closing tag </h1> with a slash. Whatever is between them is affected.

<head> holds information about the page, like its title.
<body> holds what people see.
<h1> is the biggest heading.

Step 2: add text

<h1>All About Max</h1>
<p>Max is my dog. He loves chasing balls.</p>
<h2>What he likes</h2>
<ul>
  <li>Walks</li>
  <li>Treats</li>
  <li>Naps</li>
</ul>

<p> is a paragraph.
<h2> is a smaller heading.
<ul> makes a bullet list, and each <li> is one item.

Step 3: add a link

<p>Read more about <a href="https://en.wikipedia.org/wiki/Dog">dogs</a>.</p>

The <a> tag makes a link. The href part says where it goes, and the text between the tags is what you click.

Step 4: add a picture

<img src="max.jpg" alt="Max the dog holding a ball">

Put a photo called max.jpg in the same folder. The alt text describes the picture for people who can't see it.

Step 5: make it yours

Ask your child to change the topic to something they care about: a football team, a favourite game, a pet, a hobby. Add three headings and two pictures. Then show the page to family.

Common mistakes

Forgetting to close a tag. If everything looks bold or huge, you probably left one open.
Wrong file name. src="Max.jpg" won't find max.jpg on some systems; capital letters matter.
Saving as .txt. The file must end in .html.

What next?

HTML decides what is on the page. To change colours and layout, move on to CSS: CSS for kids. To understand what happens when you type a web address, read how the web works for kids.