Use these comparisons when two elements or attributes seem to solve the same task but leave different browser behavior behind.
Actions and destinations
Choose native actions for operations and links for navigation.
- HTML button versus input type=button: content and default action
- HTML link versus button: navigation and actions have different contracts
Form state and labels
Separate browser validation, submission state, and visible field identity.
- HTML required versus aria-required: semantics do not replace validation
- HTML readonly versus disabled: preserve the right submission contract
- HTML placeholder versus label: keep field identity visible
Visibility and panels
Decide whether content is hidden, dismissible, or blocking.
- HTML hidden versus aria-hidden: rendering and accessibility are different scopes
- HTML dialog versus popover: decide whether the task blocks the page
Data relationships
Use table structure for actual row and column relationships.
Common Mistakes
A similar appearance does not make two controls interchangeable. Test keyboard behavior and submitted values, not just the rendered layout.