Agent WranglersHTML basics
Everything in the head of a page, such as doctype, language, title, description, canonical address, icons, colours, social cards and feeds.
- Required 5
- Recommended 7
- Optional 2
Required
Start every page with the doctype
RequiredStart every HTML page with
<!doctype html>as its very first bytes, so browsers use standards mode (the modern, predictable way of laying out pages).Say the page's language
RequiredSet the page's language on the
<html>element of every page, such aslang="en", using a standard language code (BCP 47).Declare UTF-8 first
RequiredMake
<meta charset="utf-8">the first element in<head>, inside the first 1024 bytes. Send the same character set in theContent-Typeheader.Fit the page to the phone
RequiredAdd
<meta name="viewport" content="width=device-width, initial-scale=1">to every page, and never turn off zooming.Give every page its own title
RequiredGive every page exactly one unique, non-empty
<title>, sent by the server. Put the page's name first and the site name last, in about 60 characters at most.
Recommended
Write a summary for search results
RecommendedWrite a unique description for every public page by hand, about 120 to 160 characters. Tell a searcher what the page offers.
Ship a full set of icons
RecommendedShip an SVG favicon, a
/favicon.icofallback, a 180 px opaqueapple-touch-icon, and 192, 512 and maskable icons for installed web apps.Colour the browser bar to match
RecommendedSet
<meta name="theme-color">twice, once for light and once for dark, so the browser's own bar matches the page.Support light and dark from the start
RecommendedSay which colour schemes the page supports, with
<meta name="color-scheme">and the CSScolor-schemeproperty. Design dark mode on purpose.Control how shared links look
RecommendedGive every page Open Graph tags (type, title, description, url, and an image with width, height and alt). They make links look right when shared.
Point readers to your feed
RecommendedAnnounce every feed in each page's
<head>with<link rel="alternate">and the right type, so readers and agents can find it.Keep your feed clean and valid
RecommendedPublish valid feeds with a self link and the full text. Give each entry a stable id and an honest updated date.
Optional
Push feed updates to subscribers
OptionalIf you publish a feed, name a WebSub hub in it and in a
Linkheader. Tell the hub whenever the content changes.Say in DNS if a domain is for sale
OptionalOnly if a domain is for sale, say so with a TXT record at
_for-sale. Otherwise publish nothing.
For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/html-basics.