Foundations
The HTML, head, and document basics every page needs.
20 topics in this category.
The HTML doctype
RequiredEvery 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.
The lang attribute on <html>
RequiredSet 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.
<meta charset>
RequiredDeclare 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.
<meta viewport>
RequiredTell 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.
The <title> element
RequiredEvery 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.
<meta name="description">
RecommendedA 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.
Canonical URL (rel="canonical")
RecommendedDeclare 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.
Favicons and app icons
RecommendedShip 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.
<meta name="theme-color">
RecommendedTints 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.
<meta name="color-scheme">
RecommendedTells 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.
Open Graph protocol
RecommendedOpen 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.
Feed discovery with rel="alternate"
RecommendedIf 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.
Feed content hygiene
RecommendedIf 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.
Popover API
RecommendedReplace ARIA-puzzled JavaScript modals, menus, and tooltips with a native top-layer primitive that the browser opens, closes, and accessibility-wires for you.
CSS anchor positioning
RecommendedTether 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.
Balanced text wrapping
RecommendedLet the browser break headings and body copy intelligently with text-wrap: balance and pretty — no orphaned words, no manual line breaks, no layout shift.
CSS container queries
RecommendedStyle 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.
Invoker commands
RecommendedWire 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.
Entry and exit animations
OptionalAnimate elements as they appear and disappear — including to and from display: none and the top layer — with @starting-style and transition-behavior: allow-discrete, no JavaScript timers.
Content-based field sizing
OptionalLet text inputs, textareas, and selects shrink-wrap and grow with their content using field-sizing: content — one line of CSS that replaces the JavaScript auto-grow hack.