` (≤60 chars, page-specific first), `<meta name="description">` (≤160 chars), canonical URL. Add Open Graph (`og:title`, `og:description`, `og:image` 1200×630, `og:url`, `og:type`) and `<meta name="twitter:card" content="summary_large_image">` for any shareable page. 8. **Navigation is a list.** - ✅ `<nav aria-label="Main"><ul><li><a …>` (the `aria-label` here names the landmark; deeper ARIA belongs to ensuring-accessibility) - ❌ A row of bare `<a>` tags or divs ## Workflow 1. Outline the content hierarchy first (what is the one h1; what are the sections) — before writing any tags. 2. Lay down landmarks, then headings, then flow content, choosing elements by rule 3. 3. Fill the `<head>` per rule 7. 4. Self-review: exactly one `<h1>`? No skipped heading levels (grep `<h[1-6]` and read the sequence)? All content inside landmarks? Every `<section>` has a heading? Title and description unique and within length? ## Edge cases & failure modes - **Single-page apps:** the rules apply to the rendered DOM — verify the hydrated output, not just the template. - **Multiple h1s from a CMS/theme:** demote all but the page's main topic; adjust sizes in CSS. - **No semantic element fits** (pure styling wrapper): use `<div>` without guilt — forcing `<section>` everywhere is as wrong as div-soup. - **Legacy layout tables:** convert to CSS layout only when asked; otherwise flag it and move on. ## References Copy-paste page skeletons, meta blocks, and data-table patterns: see [references/patterns.md](references/patterns.md)

` = self-contained/syndicatable, `

` = titled thematic group (must contain a heading), `

` = styling hook only.** 6. **`