# The Website Specification — checklist (18 items)

## Foundations
- [ ] **The HTML doctype** _(required)_ — Every HTML document must start with <!doctype html> as its first line. This opts the browser into standards mode; without it, you get quirks mode and broken layout.
      https://specification.website/spec/foundations/doctype/
- [ ] **The lang attribute on <html>** _(required)_ — Set a valid BCP 47 language tag on the <html> element so screen readers, translators, search engines, and browsers know what language the page is in.
      https://specification.website/spec/foundations/html-lang/
- [ ] **<meta charset>** _(required)_ — Declare UTF-8 as the document character encoding in the first 1024 bytes of the HTML, so browsers parse text correctly before they hit any non-ASCII content.
      https://specification.website/spec/foundations/meta-charset/
- [ ] **<meta viewport>** _(required)_ — Tell mobile browsers to render the page at the device's actual width instead of pretending to be a 980-pixel desktop. One line, and never disable user scaling.
      https://specification.website/spec/foundations/meta-viewport/
- [ ] **The <title> element** _(required)_ — Every HTML document must have exactly one non-empty <title> element inside <head>. It is used by browsers, search engines, screen readers, social previews, and AI agents.
      https://specification.website/spec/foundations/title/
- [ ] **<meta name="description">** _(recommended)_ — A short, unique summary of the page used by search engines and social platforms as a snippet. Google may rewrite it, but a good one is rewritten less often.
      https://specification.website/spec/foundations/meta-description/
- [ ] **Canonical URL (rel="canonical")** _(recommended)_ — Declare the preferred URL for a page so search engines and crawlers consolidate ranking signals on one address, even when several URLs serve the same content.
      https://specification.website/spec/foundations/canonical-url/
- [ ] **Favicons and app icons** _(recommended)_ — Ship an SVG favicon, an ICO fallback at /favicon.ico, an apple-touch-icon, and a maskable PWA icon. Five files cover every browser and home-screen surface.
      https://specification.website/spec/foundations/favicons/
- [ ] **<meta name="theme-color">** _(recommended)_ — Tints the browser chrome and OS surfaces to match your brand. Use the media attribute to ship one colour for light mode and another for dark mode.
      https://specification.website/spec/foundations/theme-color/
- [ ] **<meta name="color-scheme">** _(recommended)_ — Tells the browser which colour schemes your page is designed for. Prevents the white flash that dark-mode users see before your CSS loads, and lets the browser style scrollbars, form controls, and the page background to match.
      https://specification.website/spec/foundations/color-scheme/
- [ ] **Open Graph protocol** _(recommended)_ — Open Graph tags control how pages look when shared on social platforms and chat apps. Set og:title, og:description, og:image, og:url, and og:type on every page.
      https://specification.website/spec/foundations/open-graph/
- [ ] **Feed discovery with rel="alternate"** _(recommended)_ — If your site publishes a feed — RSS, Atom, or JSON Feed — announce it in <head> with <link rel="alternate">. Feed readers, agents, and browsers discover it without guessing the URL.
      https://specification.website/spec/foundations/feed-discovery/
- [ ] **Feed content hygiene** _(recommended)_ — If you publish a feed, ship it well-formed. Identify the feed inside itself with atom:link rel="self", give every item a stable guid, declare an update cadence with the Syndication module, and validate before deploy.
      https://specification.website/spec/foundations/feed-hygiene/
- [ ] **Popover API** _(recommended)_ — Replace ARIA-puzzled JavaScript modals, menus, and tooltips with a native top-layer primitive that the browser opens, closes, and accessibility-wires for you.
      https://specification.website/spec/foundations/popover-api/
- [ ] **CSS anchor positioning** _(recommended)_ — Tether tooltips, menus, and popovers to the element that triggers them with pure CSS — no JavaScript positioning library, and it works across overflow and stacking boundaries.
      https://specification.website/spec/foundations/anchor-positioning/
- [ ] **Balanced text wrapping** _(recommended)_ — Let the browser break headings and body copy intelligently with text-wrap: balance and pretty — no orphaned words, no manual line breaks, no layout shift.
      https://specification.website/spec/foundations/text-wrap/
- [ ] **CSS container queries** _(recommended)_ — Style a component by the space it is actually given with container-type and @container — responsive design that follows the container, not the viewport — and test a container's own custom properties with style queries.
      https://specification.website/spec/foundations/container-queries/
- [ ] **Invoker commands** _(optional)_ — Wire a button to open a popover, close a dialog, or run a custom action declaratively with command and commandfor — no click handler, no ARIA plumbing.
      https://specification.website/spec/foundations/invoker-commands/