- name
- HTML
- description
- Avoid common HTML mistakes — accessibility gaps, form pitfalls, and SEO oversights.
- metadata
- {"clawdbot":{"emoji":"🌐","os":["linux","darwin","win32"]}}
Layout Shift Prevention
widthandheighton<img>even with CSS sizing — browser reserves space before loadaspect-ratioin CSS as fallback — for responsive images without dimensions
Form Gotchas
autocompleteattribute is specific —autocomplete="email",autocomplete="new-password", not juston/off<fieldset>+<legend>required for radio/checkbox groups — screen readers announce the group labelinputmodefor virtual keyboard —inputmode="numeric"shows number pad without validation constraintsenterkeyhintchanges mobile keyboard button —enterkeyhint="search",enterkeyhint="send"
Accessibility Gaps
- Skip link must be first focusable —
<a href="#main" class="skip">Skip to content</a>before nav <th scope="col">orscope="row"— without scope, screen readers can't associate headersaria-hidden="true"hides from screen readers — use for decorative icons, not interactive elementsrole="presentation"on layout tables — if you must use tables for layout (you shouldn't)
Link Security
target="_blank"needsrel="noopener noreferrer"—noopenerprevents window.opener access,noreferrerhides referrer- User-generated links need
rel="nofollow ugc"—ugctells search engines it's user content
SEO Meta
<link rel="canonical">prevents duplicate content — self-referencing canonical on every pageog:imageneeds absolute URL — relative paths fail on social platformstwitter:cardvalues:summary,summary_large_image,player— not arbitrary
Common Oversights
<button type="button">for non-submit — default istype="submit", triggers form submission<dialog>element for modals — built-in focus trap and escape handling<details>+<summary>for accordions — no JS needed, accessible by default- Void elements don't need closing slash —
<img>not<img />in HTML5, though both work