Your page has a heading, some writing and a list. Today you give it real structure: sections with their own subheadings, a picture that sits with the section it belongs to, and a second page you can click through to.

Getting started: open the builder further down and carry on with the site you built last lesson. It is already there.

A big heading names the whole page. A subheading names one section inside it. That difference is the whole idea of structure: a reader can skim the subheadings and know what is there.

Notice the two different tags below, and that a picture tag is the odd one out: it has no closing tag, because there is no text to wrap.

<h1>All About Cats</h1>
<h2>What they eat</h2>
<p>Mostly fish, in my experience.</p>
<img src="cat.svg" alt="A cat">

Carry on with your site in the builder below.

1. In the block palette down the left, click Content, then drag a subheading block onto your page. Name a section of your page in it.
2. From Content again, drag a text block underneath it and write a sentence or two.
3. Predict the tag, then open the HTML tab and check.

Here are your two blocks, and the tags they wrote. A subheading is not a heading:

{"blocks": {"languageVersion": 0, "blocks": [{"type": "wp_subheading", "fields": {"TEXT": "What they eat", "ALIGN": "left"}, "next": {"block": {"type": "wp_text", "fields": {"TEXT": "Mostly fish, in my experience.", "SIZE": "normal", "ALIGN": "left"}}}, "x": 10, "y": 10}]}}

<h2>What they eat</h2>
<p>Mostly fish, in my experience.</p>

A picture belongs with the thing it shows, not floating at the bottom of the page.

1. From Content in the palette, drag a picture block and drop it underneath one of your sections. Choose a picture from its dropdown.
2. Check the preview: does it sit with the right section?
3. Find its tag in the HTML tab.

Here is your picture block, and its tag. It carries two pieces of information inside it, and it closes itself:

{"blocks": {"languageVersion": 0, "blocks": [{"type": "wp_picture", "fields": {"IMG": "cat"}, "x": 10, "y": 10}]}}

<img src="cat.svg" alt="A cat">

Sometimes a section needs a visible edge.

1. From Content in the palette, drag a line block and drop it between two of your sections.
2. Predict its tag. It is the shortest one you have met.

Here is a line sitting between two sections, and the tags. Like the picture, the line closes itself, because there is nothing to put inside it:

{"blocks": {"languageVersion": 0, "blocks": [{"type": "wp_subheading", "fields": {"TEXT": "Where they sleep", "ALIGN": "left"}, "next": {"block": {"type": "wp_divider", "next": {"block": {"type": "wp_subheading", "fields": {"TEXT": "What they eat", "ALIGN": "left"}}}}}, "x": 10, "y": 10}]}}

<h2>Where they sleep</h2>
<p>Anywhere warm.</p>
<hr>
<h2>What they eat</h2>