Accessibility · Lesson 7 of 8 · 7 minutes

Accessibility: Heading structure

Headings organize navigable topics. Styling a paragraph to look large does not give it heading semantics.

Open the lab Course map

Mastery 0/3Run itExplain itApply it

Current edit

PreviewNo external resources

Your objectives

Hints are always available. Wrong turns never cost XP.

1
Build heading structure
Build this first target: <h1> containing “Accessible workshop”. Inspect the structure before checking the lesson.
Hint & worked example
Headings organize navigable topics. Styling a paragraph to look large does not give it heading semantics.
The requested elements, attributes, content, and hierarchy exist outside comments.
```
<h1>Accessible workshop</h1>
```
Common mistake to avoid: A visual appearance alone guarantees the intended HTML meaning.
2
Extend the heading structure example
Extend your file to include: <h1> containing “Accessible workshop”; <section>; <h2> inside <section> containing “Getting here”. Inspect the structure before checking the lesson.
Hint & worked example
Headings organize navigable topics. Styling a paragraph to look large does not give it heading semantics.
The requested elements, attributes, content, and hierarchy exist outside comments.
```
<h1>Accessible workshop</h1><section><h2>Getting here</h2></section>
```
Common mistake to avoid: Replacing semantic elements with generic divs automatically improves accessibility.
3
Verify the complete heading structure pattern
Finish the pattern with: <h1> containing “Accessible workshop”; <section>; <h2> inside <section> containing “Getting here”; <h3> inside <section> containing “Step-free entrance”; <p> inside <section> containing “Use the east doors.”. Inspect the structure before checking the lesson.
Hint & worked example
Headings organize navigable topics. Styling a paragraph to look large does not give it heading semantics.
The requested elements, attributes, content, and hierarchy exist outside comments.
```
<h1>Accessible workshop</h1><section><h2>Getting here</h2><h3>Step-free entrance</h3><p>Use the east doors.</p></section>
```
Common mistake to avoid: A visual appearance alone guarantees the intended HTML meaning.

Understand the pattern

Headings organize navigable topics. Styling a paragraph to look large does not give it heading semantics.

Misconceptions to reject

A visual appearance alone guarantees the intended HTML meaning.
Replacing semantic elements with generic divs automatically improves accessibility.

The preview is a sanitized subset, not a full browser compatibility test.

Worked example and expected result

<h1>Accessible workshop</h1><section><h2>Getting here</h2><h3>Step-free entrance</h3><p>Use the east doors.</p></section>

Headings organize navigable topics. Styling a paragraph to look large does not give it heading semantics.

Try a variation

Adapt the final example to a different project name while retaining its structure and relationships. A different context still needs a real browser and accessibility check.

Explain it

Which statement correctly explains heading structure?Replacing semantic elements with generic divs automatically improves accessibility.Headings organize navigable topics. Styling a paragraph to look large does not give it heading semantics.A visual appearance alone guarantees the intended HTML meaning.

Apply it elsewhere

You reuse heading structure in a different project. What must still be verified?The meaning, relationships, and accessible names in the new document.Nothing; passing a single exercise guarantees every future use.Only whether the source code has the same number of lines.

Keep the momentum.

Complete the lab, then explain and apply the pattern.

Next: Accessibility: Accessibility checkpoint Try an incident drill

Anonymous lesson and mastery progress lasts for this session. Sign in to keep synced lesson XP between sessions; mastery stays device-local. No speed bonus, lost lives, or hint penalties.

Keep learning

MDN: HTML structure