Chapter 2 — Semantic HTML and Landmarks

Describe the purpose and relationships of page content before adding visual presentation.

New concepts

Page landmarks, thematic sections, independent articles, complementary asides, scoped headers and footers, figures with captions, logical headings, labelled navigation, meaningful image alt text, and public-page document metadata.

Read the Semantic HTML gauge

What changed?

Chapter 1 groups content mainly with divs. This chapter chooses elements that communicate what each region means while the pages still have no CSS.

Lessons

  1. 1. Page landmarks
  2. 2. Sections and articles
  3. 3. Asides, figures, and generic groups
  4. 4. Complete semantic page
  5. 5. Rewrite weak alt text
  6. 6. Document metadata

Checkpoint

Outline a page with one main region, labelled navigation, at least one headed section, one independent article, complementary content, and a page footer. Explain why each element fits its content.