HTML

--- name: HTML description: Avoid common HTML mistakes — accessibility gaps, form pitfalls, and SEO oversights. metadata: {"clawdbot":{"emoji":"🌐","os":["linux","darwin","win32"]}} ---

Layout Shift Prevention

• width and height on even with CSS sizing — browser reserves space before load
• aspect-ratio in CSS as fallback — for responsive images without dimensions

Form Gotchas

• autocomplete attribute is specific — autocomplete="email", autocomplete="new-password", not just on/off
• +

  required for radio/checkbox groups — screen readers announce the group label
• inputmode for virtual keyboard — inputmode="numeric" shows number pad without validation constraints
• enterkeyhint changes mobile keyboard button — enterkeyhint="search", enterkeyhint="send"

Accessibility Gaps

• Skip link must be first focusable — Skip to content before nav
• or scope="row" — without scope, screen readers can't associate headers
• aria-hidden="true" hides from screen readers — use for decorative icons, not interactive elements
• role="presentation" on layout tables — if you must use tables for layout (you shouldn't)

Link Security

• target="_blank" needs rel="noopener noreferrer" — noopener prevents window.opener access, noreferrer hides referrer
• User-generated links need rel="nofollow ugc" — ugc tells search engines it's user content

SEO Meta

• prevents duplicate content — self-referencing canonical on every page
• og:image needs absolute URL — relative paths fail on social platforms
• twitter:card values: summary, summary_large_image, player — not arbitrary

Common Oversights

• for non-submit — default is type="submit", triggers form submission
• element for modals — built-in focus trap and escape handling
• +

  for accordions — no JS needed, accessible by default
• Void elements don't need closing slash — not in HTML5, though both work