HTML常见错误

Layout Shift Prevention

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

Form Gotchas

• - autocomplete attribute is specific — autocomplete="email", autocomplete="new-password", not just INLINECODE7
• INLINECODE8 + <legend> required for radio/checkbox groups — screen readers announce the group label
• INLINECODE10 for virtual keyboard — inputmode="numeric" shows number pad without validation constraints
• INLINECODE12 changes mobile keyboard button — enterkeyhint="search", INLINECODE14

Accessibility Gaps

• - Skip link must be first focusable — <a href="#main" class="skip">Skip to content</a> before nav
• INLINECODE16 or scope="row" — without scope, screen readers can't associate headers
• INLINECODE18 hides from screen readers — use for decorative icons, not interactive elements
• INLINECODE19 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

• - <link rel="canonical"> prevents duplicate content — self-referencing canonical on every page
• INLINECODE27 needs absolute URL — relative paths fail on social platforms
• INLINECODE28 values: summary, summary_large_image, player — not arbitrary

Common Oversights

• - <button type="button"> for non-submit — default is type="submit", triggers form submission
• INLINECODE34 element for modals — built-in focus trap and escape handling
• INLINECODE35 + <summary> for accordions — no JS needed, accessible by default
• Void elements don't need closing slash — <img> not <img /> in HTML5, though both work