## Instructions - Always start from `` with ``, correct `` order: charset, viewport, title, description, OG/Twitter tags, then CSS. - Use semantic landmarks: one `
`, `
/
``` ```html
Plan comparison
FeatureBasicPro
Storage10 GB1 TB
``` ## Tools - SARAH `file_write`: scaffold `index.html` from boilerplate above; keep one page per file until a build step is justified. - SARAH `shell_run`: serve with `python3 -m http.server 8000` for preview; run `npx html-validate index.html` if available. - SARAH preview pane: any folder with `index.html` renders — verify links/forms visually, not just source. ## Advanced - Performance: preconnect fonts, `fetchpriority="high"` on LCP hero image, `decoding="async"`, self-host fonts with `font-display: swap`. - i18n/SEO: one `hreflang`/canonical set per locale, `dir="rtl"` support, descriptive `` under 60 chars per page. - Troubleshooting: layout jumps mean missing image dimensions; invisible focus means global `outline:none` — restore `:focus-visible`; broken OG usually wrong absolute image URL or missing 1200x630 size. - Dialogs/menus: use native `<dialog>`, `<details>/<summary>`, `popover` API before custom ARIA widgets. - Pro tip: add `<meta name="format-detection" content="telephone=no">` when phone-number auto-linking breaks designs; keep preheader hack (`display:none` span) for emails. ## Documentation - MDN HTML: https://developer.mozilla.org/en-US/docs/Web/HTML - web.dev Learn HTML: https://web.dev/learn/html - W3C Validator: https://validator.w3.org