Web standards – Glossary

Web standards are agreed upon practices for writing semantic HTML, maintainable CSS, and accessible user interfaces that work reliably across browsers.

Why it matters

• Work across browsers and devices.
• Be readable by assistive technologies.
• Load faster and remain maintainable.
• Rank and render predictably.

Core practices

• Write semantic HTML, use the right element for the job.
• Separate structure, presentation, and behavior (HTML, CSS, JS do distinct things).
• Use accessible patterns (headings, labels, landmarks, focus states).
• Validate code, fix errors early to avoid rendering issues.
• Prefer progressive enhancement (make the core experience work first).
• Test across browsers and devices (catch layout and input bugs).
• Optimize performance (small assets, efficient CSS, minimal blocking JS).

Do this / Avoid this

• Do this: native controls for interactivity, clear headings, labeled forms, visible focus, feature detection.
• Avoid this: div‑buttons, click‑only interactions, ARIA that replaces native semantics, layout shifts, blocking scripts in head.

Examples

• Use button for interactive actions, not div (keyboard support, semantics, focus).
• Use nav and main landmarks for screen readers (easier navigation).
• Group form fields with labels and accessible error messages (associate with aria-describedby when needed).
• Serve responsive images with srcset and sizes (faster loads, better rendering).

Quick checklist

• Semantics: Interactive controls are native or have role, name, state.
• Accessibility: One h1, logical heading order, visible focus, full keyboard operability.
• Performance: Minify CSS, defer noncritical JS, compress images, set caching.
• Compatibility: Feature detect, provide fallbacks, test in multiple engines.
• Validation: No HTML errors, no contrast failures, minimal layout shift on load.

Progressive enhancement, in practice

• Core works without JavaScript (links navigate, forms submit, content readable).
• Enhancements are gated by feature detection, not browser sniffing.
• Failure is graceful, the page stays usable if a module fails.

How to test

• Keyboard pass: Tab through all interactive elements, focus is visible, Escape closes dialogs.
• Screen reader pass: Navigate by headings and landmarks, confirm names on buttons and inputs.
• Performance pass: Largest Contentful Paint under 2.5 seconds, minimal layout jumps, few blocking scripts.
• Cross‑browser pass: Test in Chromium and Gecko on desktop and mobile.