Start learning →

‹ Practice problems Hard HTML and CSS

Repair a broken outline

This page picks headings by size. Fix the outline so that it describes the document.

What to build

The same words with the right structure:

  • StepVioz Guide is the title.
  • Plans and Help are sections.
  • Pricing is a part of Plans.

Requirements

  • Exactly one h1: StepVioz Guide.
  • Plans and Help are h2.
  • Pricing is h3, and comes after Plans and before Help.
  • The word free in the paragraph under Pricing is strong.
  • There are no br elements on the page.

Constraints

Keep all the words. Do not use h4, h5 or h6.

Example

The outline goes h1, h2, h3, h2.

Why it works

A screen reader can now list the page as a true table of contents, and each level sits directly under its parent.

Hints

Hint 1

Keep exactly one h1. Everything directly under it is an h2.

Hint 2

Page size is not the reason for a level: Pricing is a part of Plans.

Hint 3

em is for stress and strong is for importance.

Solution

Show one correct solution (try it yourself first)
<h1>StepVioz Guide</h1>
<h2>Plans</h2>
<h3>Pricing</h3>
<p>Every lesson is <strong>free</strong>.</p>
<h2>Help</h2>
<p>Ask a question in the forum.</p>

Lesson: Headings, paragraphs and text →