Whitespace collapses, br breaks
innerText gives the text as the page shows it, after whitespace has collapsed.
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
Shown on the page: "This paragraph is written across several lines with extra spaces."
Line breaks in the poem: 3