Foundations
The HTML, head, and document basics every page needs.
14 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.