HTML: Structure

Headings and paragraphs

Lesson 3 of 18 · About 20 minutes

Your goal: Organise content into sections.

Learn

Use h1 for the page topic and h2 for its main sections. Heading levels describe structure; CSS controls their appearance. Each paragraph belongs in p tags.

View starter code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My hobby page</title>
    <style></style>
  </head>

  <body>
    <h1>Topic: Aquatic Plants</h1>
    <h2>Floating Plants</h2>
    <p>These plants float on water.</p>
    <h2>Submerged Plants</h2>
    <p>These plants grow below the surface.</p>
  </body>
</html>

Your challenge

Change this to your hobby. Keep one h1 and two h2 headings; add a paragraph to each section.

Keep developing your hobby page: Download HTML before leaving the sandbox, then choose Open HTML file when returning to your project. Load saved draft restores only this lesson’s draft in this browser.

Practise in the sandbox

Show a hint

Try sections called Equipment and Getting started.

Show a sample answer

Try the challenge first. This is one possible answer or a snippet to adapt.

<h1>Gardening</h1>
<h2>Equipment</h2>
<p>I use a watering can.</p>
<h2>Getting started</h2>
<p>Choose a pot and plant some seeds.</p>

Check your work

There is one main heading, two section headings and a paragraph in each section.

I tried the challenge and checked the result.

Completion is your own check, not an automatic grade.