Semantic HTML: Stop Using Divs for Everything
The single most common mistake taught by modern JS bootcamps is using <div onClick> instead of a <button>. This destroys accessibility, breaks keyboard navigation, and fundamentally misunderstands the web platform.
The Div Soup Anti-Pattern
If your React component looks like a tree of 15 divs, you are doing it wrong.
- Buttons vs Links: A link (
<a>) navigates. A button (<button>) performs an action on the page. - Landmarks: Use
<main>,<nav>,<aside>, and<header>so screen readers can skip navigation blocks. - Headings: Headings (
<h1>-<h6>) must form a logical document outline, not just be used for visual sizing.
The Cost of Re-inventing the Button
If you use a div for a button, you must manually add: tabindex="0", role="button", an event listener for Enter key, and an event listener for Space key. Or you could just use a button.
Interactive Tool: Outline Validator
Outline Analysis
Waiting...