Six heading levels and their default sizes
These are only the browser's default sizes. Pick the level for the outline, then set the size in CSS.
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 32px
h2 24px
h3 18.72px
h4 16px
h5 13.28px
h6 10.72px