Challenge · easy
HTML Heading Order: Fix h1 to h3 Practice Challenge
Goal: Turn messy headings into a sensible outline.
Learn
A page's headings work like the contents page of a book. Plenty of screen reader users get around by jumping from one heading to the next, so the levels have to add up. In WCAG 2.2 this falls under success criterion 1.3.1, Info and Relationships (opens in a new tab).
The rules are short. One <h1> holds the page title. Main sections get <h2>, and parts of a section get <h3>. On the way down, never jump a level, such as h2 straight to h4. All six ranks are described in the HTML standard's heading section (opens in a new tab).
A bold line in a paragraph may look like a heading. It is still a paragraph. When text names a section, mark it up as a heading. The heading order lesson goes into the reasons.
The short version
- A sound outline has one
<h1>,<h2>sections and<h3>subsections. - Going down, never jump a level (h2 straight to h4 is wrong).
- Bold text that names a section should be a real heading.
- Pick the level for the structure. Size is a job for CSS.
Example
<h1>Garden Guide</h1>
<h2>Spring</h2>
<h3>Planting</h3>
<p>Sow seeds after the last frost.</p>
<h2>Summer</h2>
<p>Water early in the morning.</p>Your task
The headings on this bike care page are a mess. Fix them:
- Leave exactly one
<h1>, 'Bike Care'. - 'Cleaning' and 'Tyres' are the main sections, so they become
<h2>. - 'The chain' belongs to Cleaning. Make it an
<h3>; no h4 stays on the page. - 'Pressure' belongs to Tyres. Swap the bold paragraph for an
<h3>and drop the<b>.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Frequently asked questions
Can you skip heading levels in HTML?
Not on the way down, even though the browser will not complain. Going from <h2> to <h4> makes a screen reader user think a section went missing, and accessibility checkers flag it (the HTML accessibility checklist covers this). Going back up is fine. After an <h3>, start a new <h2> section whenever you need one. A level that looks too large gets resized in CSS.
How many h1 tags should a page have?
One <h1>, for the main title. HTML allows more, but a single h1 gives screen reader users the cleanest outline (many jump to it first) and tells search engines plainly what the page covers. Google's SEO Starter Guide (opens in a new tab) explains why well-organized content helps in search. Everything under the title uses <h2> to <h6>.