Skip to content

Level 03 Lesson 02 of 3

Headings and Page Structure

Learn to organise a webpage with a clear primary heading, logical sections and scannable content patterns that reveal the answer early.

Learning objectiveLearn to organise a webpage with a clear primary heading, logical sections and scannable content patterns that reveal the answer early.

Estimated time8 min read

0 lessons completed0%

Current lesson · not completed

Your learning progress is stored only in this browser and is not sent anywhere.

A page needs a readable game map

A level-selection screen shows the main mission, routes and smaller challenges at a glance. Page structure should do the same. Give the page one clear primary H1, divide major ideas with descriptive H2 headings and use H3 headings only for subsections within them.

Wall of text versus mapped page

Confusing route

A wall with no landmarks

Our plant guide covers light and watering and pots and pests and feeding and several other things that might help, followed by more dense detail with no visible route to the answer...

Text equivalent: one long block hides the main answer and gives the reader no section labels.

Clear route

Care for a snake plant

  • Direct answer near the start
  • Light and position
  • Watering steps
  • Common problems

Text equivalent: a primary topic leads to labelled sections, short paragraphs and a useful list.

Heading hierarchy diagram

Document outline: each H3 belongs beneath the relevant H2
H1 · Beginner snake plant care
H2 · Light and positionH3 · Signs of too much sun
H2 · WateringH3 · Winter scheduleH3 · Signs of overwatering

A practical page outline

  1. 1

    H1: Repair a dripping tap

  2. 2

    Opening: tools and first safe step

  3. 3

    H2: Identify the tap type

  4. 4

    H2: Replace the washer

  5. 5

    H3: Test for leaks

  6. 6

    H2: When to call a plumber

Answer the main question early. Then make detail easy to scan with short paragraphs, lists, cards or a visual summary—whichever genuinely fits the information.

Common structural mistakes

A vague directory

Headings such as “More” and “Other” reveal nothing about the section.

Skipped logic

An H3 appears as a major section without a parent H2.

Styling disguised as structure

A heading element is chosen only to make ordinary copy large.

The answer maze

A long introduction postpones the information the visitor came to find.

Arrange the level screen

Related dictionary terms

Level checkpoint / Mission review

Check what you learned

Answer all three questions correctly, then complete the lesson. Retry any answer whenever you need.

Question 1 of 3What is the generally easiest approach to a page-level H1?

Question 2 of 3Which hierarchy is logical?

Question 3 of 3Which change makes a long page easier to scan?

Complete all three questions to unlock lesson completion.

Your learning progress is stored only in this browser and is not sent anywhere.