Example

A reading journal with a clear heading

Build a small reading journal and see how a heading, paragraph, and main landmark work together.

Beginner2 min readLearn · Practice · Review

Published by HTML Code Runner · AI-assisted material · Independent editorial review pending · Editorial policy

On this page

Understand the source

The main element identifies the dominant content. Its h1 names the journal, while the paragraph describes what the writer is learning. These are separate semantic jobs: making the paragraph larger with CSS would not turn it into a heading.

<main>
  <h1>My reading journal</h1>
  <p>I am learning to describe content with HTML.</p>
</main>

Expected output

The output shows a prominent journal heading followed by one sentence. The CSS changes typography, spacing, and heading color. Delete the CSS and run again: the structure remains understandable even though its appearance changes.

Make a deliberate change

Add an h2 named October and two paragraphs about books you have read. Keep the new section inside main. Then change the heading color in the CSS pane without changing the HTML. Compare which edit changed meaning and which changed presentation.

Review the behavior

Inspect the parsed document and verify that the month heading follows the page heading. Do not add extra h1 elements solely to obtain large text. If a sentence fails to appear, check that you saved the edit in the active language pane and activated Run.

Read the full explanation and expected output