Semantic HTML5 Architecture, Landmarks, and Document Outlines
Construct accessible web architectures: semantic landmark regions (header, nav, main, aside, footer), skip links, document heading hierarchies, and JSON-LD structured data.
HTML document anatomy fundamentals.
Eliminate div soup using semantic HTML5 landmarks (<header>, <nav>, <main>, <article>, <section>, <footer>) and heading outlines.
Read in order, or jump to what you need.
Every lesson builds on the one before it. Open any lesson to read the explanation, run the examples, and try the practice challenges.
- 02.01Semantic HTML5 Structural Elements vs 'Div Soup'4 min
Deconstruct HTML5 semantic structural elements: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, and explain the architectural anti-pattern of 'div soup'.
- 02.02Accessible Landmark Regions, Skip Links, and Screen Reader Navigation4 min
Master assistive navigation: ARIA landmark regions, labelling multiple navigation landmarks with aria-label, and constructing keyboard 'Skip to Content' links.
- 02.03Document Outlines, Heading Hierarchies (H1–H6), and Sectioning4 min
Master document hierarchy: the strict single-H1 rule, preventing skipped heading levels (H1 to H3 violations), screen reader heading navigation, and sectioning context.
- 02.04Structured Data: JSON-LD, Microdata, and Schema.org Vocabularies4 min
Master search engine machine-readability: Schema.org vocabularies, JSON-LD script blocks, Open Graph metadata, and unlocking Google Rich Snippets.
Ready to move on?
Construct a semantic document outline verified via accessibility inspection tools.
Open the module self-check