Every page you open in a browser is built from a language called HTML. Today you build a web page one piece at a time, and after each piece you read the HTML that piece just wrote.

By the end you will have a page with a heading, two paragraphs, a list and a link, and you will be able to name the tag behind each one.

Getting started: there is nothing to install and nothing to sign in to. The Web Page Builder is on this page, further down, and your page saves by itself as you work. Scroll to the first build step and it is there waiting.

HTML marks up text to say what each part is. A tag wraps the text and names it: this bit is a heading, this bit is a paragraph.

Tags come in pairs. The opening tag turns something on, the closing tag turns it off, and the closing one carries a slash. Here is a whole small page:

<h1>All About Cats</h1>
<p>Cats are soft and they like to sleep.</p>
<ul>
  <li>They purr</li>
  <li>They nap a lot</li>
</ul>

Open the builder below. You start with an empty page called Home.

1. In the block palette down the left, click Content, then drag a heading block onto your page. Type a title in it: a hobby, a sport, or a place you know.
2. Before you look: what do you think the tag will be called?
3. Open the HTML tab and find it.

Here is the block you added, and the tag it wrote:

{"blocks": {"languageVersion": 0, "blocks": [{"type": "wp_heading", "fields": {"TEXT": "My Favourite Animals", "ALIGN": "left"}, "x": 10, "y": 10}]}}

<h1>My Favourite Animals</h1>

Keep working on the same page. It carries on from the last step.

1. From Content, drag two text blocks under your heading. Put one sentence in each, saying something real about your topic.
2. Predict the tag, then check the HTML tab.

Here are your two blocks, and the two tags they wrote — one each:

{"blocks": {"languageVersion": 0, "blocks": [{"type": "wp_text", "fields": {"TEXT": "Cats are soft and they like to sleep.", "SIZE": "normal", "ALIGN": "left"}, "next": {"block": {"type": "wp_text", "fields": {"TEXT": "My favourite one is a ginger cat called Ollie.", "SIZE": "normal", "ALIGN": "left"}}}, "x": 10, "y": 10}]}}

<p>Cats are soft and they like to sleep.</p>
<p>My favourite one is a ginger cat called Ollie.</p>

Same page again. A list needs two blocks: the list itself, and an item for each thing in it.

1. Click List in the palette and drag a list block onto your page.
2. From the same List category, drag three item blocks and drop them inside the list block, so they sit in its mouth. Fill each one in.
3. Predict: how many different tags will this write? Then open the HTML tab.

Here are your list blocks, and what they wrote: one tag wrapped around one tag per item:

{"blocks": {"languageVersion": 0, "blocks": [{"type": "wp_list", "inputs": {"ITEMS": {"block": {"type": "wp_list_item", "fields": {"TEXT": "They purr"}, "next": {"block": {"type": "wp_list_item", "fields": {"TEXT": "They nap a lot"}, "next": {"block": {"type": "wp_list_item", "fields": {"TEXT": "They ignore you"}}}}}}}}, "x": 10, "y": 10}]}}

<ul>
  <li>They purr</li>
  <li>They nap a lot</li>
  <li>They ignore you</li>
</ul>