<button> vs <a>
<button> performs an action on the page, e.g. submitting a form. <a> navigates: it changes the address or opens a resource. Both work with the keyboard.
Side-by-side comparison
#Main purpose
Attribute required to work
Changes the URL
Can open in a new tab
Adds an entry to the browsing history
When to use it
Example
#<button type="button" onclick="alert('Changes saved')">Save changes</button>
<a href="/pricing">Go to pricing</a>Definition and usage
#<button> performs an action within the current page: it submits a form, clears fields, or runs your JavaScript code when it has type="button". On its own, it doesn’t change the page address, except for a form submitted with the get method.
<a> is for navigation: it changes the address, jumps to an anchor on the same page, or opens a file for download. Without an href attribute, it’s just a placeholder, neither clickable nor focusable. It can open in a new tab (target="_blank"), and unlike a button, it adds an entry to the browsing history, so the "back" button makes sense.
A simple rule: if a click just does something on the same page, use <button>. If it takes you elsewhere, use <a>. Never build a clickable <div> for either role, because you’ll lose keyboard and screen reader support that you’d otherwise get for free.
Syntax
#<button type="button">...</button>
<a href="address">...</a>More examples
#<form onsubmit="event.preventDefault(); this.querySelector('output').textContent = 'Sent!'">
<button>Send</button>
<output></output>
</form>A button without type="button" has a default type of submit inside a form.
<a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">
MDN documentation (new tab)
</a>Good practices
#- If a click just does something on the same page, use
<button>. If it takes you elsewhere, use<a>. - Don’t build clickable
<div>elements for either role. You’ll lose the keyboard support that comes with them for free. - A link without
hrefisn’t focusable or clickable. It’s just a placeholder.
Related entries
#- <button>A clickable button: submits a form, clears it, or runs an action on the page.
- <a>A link to another page, a file, an email address, or a place on the same page.
- <form>A form that collects data from the user and sends it to a given address.
- <nav>A block of primary navigation links: a menu, a table of contents, breadcrumbs.
Spotted a mistake or missing an example? Write to us.