Print the outline of a page
This is roughly the list a screen reader's headings menu shows. Indentation is the level.
Headings h1 to h6 form the page's outline, a table of contents that screen-reader users navigate by; give each page one h1, nest levels by meaning, and don't skip levels.
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 6 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 for a recipe page: page title, then Ingredients, Method (with sub-steps Preparing and Baking) and Serving.
This outline is broken: h1 Shop, h3 Shoes, h3 Bags, h1 Contact. Fix it.
Explain it without notes
What is the document outline, and how is it built?
Why shouldn't you skip heading levels, and is going up several levels at once also a problem?
How do screen-reader users use headings?
What was the HTML5 outline algorithm, and why shouldn't you rely on it?
Preview
Console
Nothing logged yet.Expected console output
h1 Making soft bread at home
h2 Ingredients
h2 Method
h2 Common problems
h3 Dough doesn't rise
h3 Bread is too dense
h2 Next steps