For five lessons the blocks have written the HTML and you have read it. Today you write it.

Getting started: open the builder on the next step. It has a small practice page in it, not your project, so nothing you do today can damage the site you just finished.

One thing to know first: the moment you type in the HTML tab, your typing becomes the page and the blocks stop changing it. The builder says so on screen. That is the same move you will make again in Strand 3 when blocks become Python.

You already know this shape. Today you type it.

• An opening tag, the content, then a closing tag with a slash in it.
• The name inside the angle brackets says what the thing IS: h1 a heading, p a paragraph, li one item in a list.
• Tags can sit inside other tags. The inside one must close before the outside one does.

Look at where each closing tag sits here:

<h1>My page</h1>
<p>One sentence.</p>
<ul>
  <li>First thing</li>
  <li>Second thing</li>
</ul>

Start with the safest edit there is: the words, not the tags.

1. In the builder below, click the HTML tab.
2. Find the words Practice page between the two h1 tags. Click into them and type something else. Do not touch the angle brackets.
3. Open Your web page. Your words are there.

Notice the notice: the builder is telling you the code is in charge now. That is expected.

Only the part between the tags changed:

<h1>All about my dog</h1>

Now type a tag from nothing.

1. Put your cursor at the end of the paragraph line and press Enter for a new line.
2. Type an opening <p>, then a sentence, then a closing </p>. The slash is what makes it a closing tag.
3. Check the preview. A second paragraph should be there.

Now break it on purpose: delete the slash from your closing tag and look at the preview. Put it back. That is the mistake you will make by accident later, so make it once on purpose now.

What you are typing:

<p>My dog is called Rua and he is very fast.</p>

Last piece: nesting. A list is a tag holding other tags.

1. On a new line, type <ul>.
2. On the next line, type <li>, one thing about whatever you wrote about above, then </li>.
3. Do that twice more, then close the list with </ul> on its own line.
4. Check the preview. Three bullets.

Every item closes before the list does. Line them up as you type and it is much harder to lose track:

<ul>
  <li>Chases seagulls</li>
  <li>Steals socks</li>
  <li>Sleeps on the good chair</li>
</ul>