<button>
Trigger an action, and why it is never a <a>
<button> — The button
The <button> element represents an interactive control that triggers an action. Three types: submit (send a form), reset (clear a form), and button (custom action). It is never a disguised <a>.
When to use it
You want to submit a form, open a menu, show a dialog, run a calculation, or any action that does not navigate to another page. If it navigates, use an <a>.
What you gain
Accessibility: a <button> is natively focusable and activatable via keyboard (Enter and Space). A <div onclick> is not, without extra work.
Code example
<form action="/subscribe" method="post">
<input type="email" name="email" required>
<button type="submit">Subscribe</button>
<button type="reset">Clear</button>
</form>
<button type="button" aria-expanded="false" aria-controls="menu">
Open menu
</button>Further reading
- Put down the mouse — everything clickable must be keyboard-usable
- WHATWG —
<button> - W3C — ARIA Button Pattern
- MDN —
<button>