List the page's outline
This is roughly the heading list a screen reader user sees. Indentation shows the level.
Headings <h1> to <h6> give a page its outline from most to least important, paragraphs <p> hold blocks of text, and the browser squeezes all spaces and line breaks in your code into single spaces.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write the headings and paragraphs for a page called My pets with two sections, Dogs and Cats, and a sub-section Feeding inside Dogs. Each heading gets one short paragraph.
Write a paragraph containing a three-line address, so each part appears on its own line.
Explain it without notes
Why should heading levels follow the structure of the content and not their visual size?
What does the browser do with spaces, tabs and line breaks in your HTML text?
When is <br> the right choice, and when is it the wrong one?
Preview
Console
Nothing logged yet.Expected console output
H1 Growing tomatoes
H2 Planting
H3 Choosing seeds
H2 Watering