Semantic HTML in React
React does not make semantic HTML obsolete. Use buttons for actions, anchors for navigation, headings for document structure, lists for collections, and form elements for forms.
Semantic elements provide built-in browser behavior and accessibility support. Replacing a button with a div onClick creates extra keyboard, focus, and ARIA work.
Use ARIA to fill genuine semantic gaps, not to compensate for incorrect element choices.
Button vs clickable div
<button type="button" onClick={save}>Save</button>💡 A native button already supports keyboard activation, focus semantics, and expected browser behavior.
Key Takeaways
- Prefer native semantic elements.
- ARIA supplements semantics; it does not replace them.
- Accessibility is easiest when built into component primitives.