Chapter 3 — Sectioning & Semantic Structure

A great webpage isn’t a pile of <div>s – it’s a carefully layered document with clear, meaningful regions. In this chapter you will learn to structure pages with semantic landmarks that make your code readable, accessible, and ready for teams of any size.

What’s Inside This Chapter

Section 3.1 — The Sectioning Elements, IDs, and Classes
Meet the core landmark tags: <main>, <nav>, <header>, <footer>, <section>, <article>, <aside>, <hgroup>, and <search> – plus the id and class attributes that give them names and categories.
Section 3.2 — The Document Outline in Reality
Why the automatic outline algorithm failed, and how the real world constructs outlines from heading levels alone.
Section 3.3 — Putting It Together
A complete walk‑through of a production‑grade scaffolding blueprint, showing how all the landmarks and identifiers combine into a maintainable, scalable architecture.

START READING

Turn to Section 3.1 to begin building your document’s skeleton.