Foundations
The HTML, head, and document basics every page needs.
- Required The HTML doctype — 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.
- Required The lang attribute on <html> — 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.
- Required <meta charset> — 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.
- Required <meta viewport> — 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.
- Required The <title> element — 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.
- Recommended <meta name=\"description\"> — 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.
- Recommended Canonical URL (rel=\"canonical\") — 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.
- Recommended Favicons and app icons — 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.
- Recommended <meta name=\"theme-color\"> — 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.
- Recommended <meta name=\"color-scheme\"> — 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.
- Recommended Open Graph protocol — 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.
- Recommended Feed discovery with rel=\"alternate\" — 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.
- Recommended Feed content hygiene — 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.