Inspect the working example
This original Astera example has two tasks: preparing local files and opening the result. Filename choice belongs inside preparation, so it is one level deeper. The browser exposes heading levels from the elements; it does not infer them from a large or bold font.
| Case | Input or inspection | Result and meaning |
|---|---|---|
| Page topic | Inspect Workshop notes | h1 inside the single main region |
| Preparation detail | Inspect Choose filenames | h3 follows Prepare the files h2 |
| Next task | Inspect Open the page | h2 is a sibling section heading, not a child of filename choice |
Follow the browser mechanism
The heading sequence is h1, h2, h3, h2. The two section elements are siblings inside main. Keep this structure when changing the visual style. The example establishes native heading semantics, not a promise that every reading tool builds or announces the same document outline.
Bold paragraphs lose the heading role
This alternative makes every line look like a title using CSS, but none is a heading element. It demonstrates why visual inspection alone is insufficient.
<main><p style="font-weight:bold">Workshop notes</p><p style="font-weight:bold">Prepare the files</p><p style="font-weight:bold">Choose filenames</p><p style="font-weight:bold">Open the page</p></main>The alternative has four paragraphs and zero headings. Styling the working headings to the same size still leaves four headings with levels 1, 2, 3 and 2.
Try the repair
A new “Check file extensions” subsection belongs under Choose filenames. Which heading level fits this hierarchy?
Show the worked answer
Use h4 for that subordinate subsection. Keep Open the page as h2 because it remains a separate task, not part of checking extensions.
- Inspect element names and parent sections, not font sizes alone.
- Keep the heading order 1, 2, 3, 2 after restyling this fixture.