Lesson 2 of 12
Structured learning draftStructure content with semantic HTML
Semantic elements communicate what content is and how regions relate. They provide navigation and behavior that generic containers do not. This lesson pairs implementation with repeatable browser evidence so the learner can explain both the result and its limits.
Learning objectives
- Choose elements by meaning rather than appearance.
- Build a logical landmark and heading structure.
- Check the page outline and reading order.
Structure content with semantic HTML
Structure content with semantic HTML: landmarks to headings to source order.
Choose elements by meaning rather than appearance.
Build a logical landmark and heading structure.
Check the page outline and reading order.
Use header for introductory content, nav for major navigation, main for the page's unique content, section for a named thematic group, article for self-contained content and footer for supporting information. Headings must describe the hierarchy; do not choose heading levels for their default size.
<header>
<a href="/">Amina Okello</a>
<nav aria-label="Primary"><a href="#work">Work</a> <a href="#contact">Contact</a></nav>
</header>
<main>
<h1>Accessible interface designer</h1>
<section id="work" aria-labelledby="work-title">
<h2 id="work-title">Selected work</h2>
<article><h3>Clinic booking redesign</h3><p>Reduced repeated data entry.</p></article>
</section>
</main>
<footer>© Amina Okello</footer>Audit the structure
- Disable CSS and confirm the reading order still makes sense.
- List headings and verify no level represents visual size alone.
- Inspect browser accessibility landmarks.
- Ensure there is one clear main region.
| Evidence | Record |
|---|---|
| Source | The exact HTML and CSS tested |
| Environment | Browser, viewport and input method |
| Result | Observed behavior and test outcome |
| Limitation | Unresolved issue and next action |
Common mistakes
- Using div for every region.
- Skipping from h1 to h4 for visual size.
- Reordering essential content only with CSS.
Practice activity
Apply the lesson
Replace the generic containers in a sample portfolio with semantic landmarks and a defensible heading hierarchy. Submit the source files, test environment, observed result, one failure or boundary case, and a short limitation with the next corrective action.
Check your understanding
Why should a section normally have a heading?
Lesson summary
- Native semantics expose structure automatically.
- Source order should match reading order.
- CSS controls presentation; HTML controls meaning.
Sources and further reading
- Learn web developmentMDN Web Docs - accessed 2026-09-04
- HTML StandardWHATWG - accessed 2026-09-04
- Page Structure TutorialW3C Web Accessibility Initiative - accessed 2026-09-04
- Web Content Accessibility Guidelines 2.2W3C - accessed 2026-09-04
Personal study note