Lessons · HTML and CSS · headings are the outline
Headings are the outline
Headings are how most screen reader users navigate. The list of them IS the table of contents.
Hone is a place to practise programming. This is one of its lessons, written out in full and free to read without an account.
What it is for
A page whose headings were chosen for their size has no table of contents, however good it looks.
How to think about it
Go down one level at a time; come back up as far as you like. If a heading is the wrong size, change the CSS -- the level is structure and the size is presentation, and this is the place that distinction most often gets broken.
Worked example
<h1>A</h1><h3>B</h3><h2>C</h2>Read the levels back and they are 1, 3, 2. The jump from 1 to 3 says the h3 is inside something that is not there.
Your turn
If the heading is the wrong size, change the
Write a page and watch it render
The trap
Using a styled div because the heading looked too big removes the page from the outline entirely, and nothing complains.