Gotcha:
This
<div>
looks like a button, but it's
not keyboard focusable
by default (try tabbing to it!),
and screen readers won't announce it as a "button". This seriously harms accessibility.
It also doesn't have built-in click/submit behavior like a real button.
(Notice it uses similar styling classes like
py-2 px-4
but on the wrong element.)
This is a proper
<button>
. It's focusable, accessible (announced as "button, [text]"), and handles click events correctly.
Key classes (
bg-blue-500 text-white py-2 px-4
) are applied to the correct semantic element.
This is an
<a>
tag for navigation, styled like a button. It's also focusable and accessible.
Key classes (
bg-blue-500 text-white py-2 px-4
) are applied correctly.
Summary of the "Gotcha":
Always prioritize semantic HTML. Use
<button>
for actions and
<a>
for navigation. While Tailwind CSS can make any element look like a button, using a
<div>
or
<span>
for interactive controls leads to poor accessibility and user experience.