Links: <a> vs <span>
❌
BAD: Fake Links
Try to Tab to these "links" and press Enter:
Click here to learn more
Visit our homepage
Read the documentation
</> For developers
<!-- BAD: Not a real link -->
<span class="link-style" onclick="...">
Click here
</span>
Spans are generic containers. They have no semantic meaning. Screen readers say "text" not "link". Keyboard users can't reach them.
✅
GOOD: Real Links
Tab to these links and press Enter:
</> For developers
<!-- GOOD: Semantic link -->
<a href="/services">
Learn more about our services
</a>
Real
<a href> elements are focusable, announced as "link", and work with Enter key. Always use semantic HTML.
Buttons: <button> vs <div>
❌
BAD: Fake Buttons
Try to Tab to these "buttons" and press Space:
Submit Form
Add to Cart
Cancel
</> For developers
<!-- BAD: Not a real button -->
<div class="btn" onclick="submit()">
Submit Form
</div>
Divs and spans are not interactive. They don't receive keyboard events and aren't announced as buttons.
✅
GOOD: Real Buttons
Tab to these buttons and press Space or Enter:
</> For developers
<!-- GOOD: Semantic button -->
<button type="button" onclick="submit()">
Submit Form
</button>
Real
<button> elements are focusable, announced as "button", and respond to Space and Enter keys.
Quick Reference: When to Use What
| Action | Use This | NOT This |
|---|---|---|
| Navigate to another page | <a href="..."> | <span onclick> |
| Navigate to section on same page | <a href="#id"> | <div onclick> |
| Submit a form | <button type="submit"> | <div class="btn"> |
| Toggle UI state (modal, menu) | <button type="button"> | <span onclick> |
| External link | <a href="..." target="_blank"> | <button onclick="window.open"> |
Golden Rule
If it goes somewhere = <a>. If it does something = <button>. Never use div/span for interactivity.