Get the document right before anything renders

What this checklist decides

• Critical blocks the ship
• High fix before launch
• Medium fix this quarter
• Low worth it when cheap

Document structure

The skeleton the browser builds before a single stylesheet arrives. Get it wrong and every layer above it inherits the fault.

Gotcha: a single-page app whose host rewrites every unknown path to the app shell returns 200 for garbage URLs. Search engines record those as soft 404s and keep crawling them. Make the router render a not-found view and, where the host allows it, return the status too.

Forms

Forms are where HTML does the most work for you, and where the fewest projects let it.

One field, everything wired: the right type, the autofill token, the phone keyboard, and an error the screen reader reads with the field.

<label for="email">Email</label>
<input id="email" name="email" type="email"
       autocomplete="email" inputmode="email" required
       aria-invalid="true" aria-describedby="email-error">
<p id="email-error">Enter an address with an @ in it.</p>

Gotcha: type="number" is for quantities, not digits. It strips leading zeros, rejects the plus sign in a phone number, changes value on scroll wheel in some browsers, and shows a spinner nobody asked for. Postcodes, card numbers and one-time codes are type="text" inputmode="numeric" with a pattern.

Navigation

Both patterns are a labelled <nav> around a list of links with the current item marked - the details are what get skipped.

Gotcha: a literal / or > typed between breadcrumb links is read aloud on every item. Put separators in li + li::before and they exist for sighted users only, which is the whole point of them.

Performance and security

Two attributes on the script tag decide whether the parser waits and whether a compromised CDN can run code on your page.

Gotcha: async scripts execute in the order they finish downloading, not the order they appear, so two async scripts with a dependency between them race - and win or lose depending on the network. Use defer, which preserves document order, or a module graph where the dependency is an import.

Internationalization

Five rules that cost almost nothing on the first day and a rewrite on the day marketing asks for German.

Both APIs are built into every browser. Read the locale once from the document and pass it everywhere:

const locale = document.documentElement.lang || 'en-US';

const money = new Intl.NumberFormat(locale, { style: 'currency', currency: 'USD' });
money.format(1234.5);   // en-US: "$1,234.50"   de-DE: "1.234,50 $"

const plural = new Intl.PluralRules(locale);
const forms = { one: '{n} item', other: '{n} items' };
const label = (n) => forms[plural.select(n)].replace('{n}', n);
label(1);               // "1 item"
label(5);               // "5 items"

new Intl.DateTimeFormat(locale, { dateStyle: 'medium' }).format(new Date());

Gotcha: toLocaleString() with no argument formats for whatever locale the visitor's browser reports, which is often not the language of the page they are reading. Pass the page locale explicitly, from one constant, or a German page shows American dates to a German user on an English-language laptop.