When should you use <button> vs <a>?

Choosing Between <button> and <a> in HTML

Both <button> and <a> are interactive elements, but they serve different purposes. Choosing the correct element ensures proper semantics, accessibility, and user experience.

Key Differences

1
<a> – Represents a link to another page, resource, or section within the page. Primary purpose: navigation.
2
<button> – Represents an action or command on the current page, such as submitting a form, opening a modal, or toggling content.

When to Use Each

1
Use <a> when navigating to a new URL or location. Example: <a href="/about">About Us</a>
2
Use <button> when performing an action on the current page. Example: <button type="submit">Submit</button>

Correct use helps screen readers and other assistive technologies convey the proper role. Misusing these elements can confuse users.

Best Practices

1
Do not use <a> for actions that do not navigate; use <button> instead.
2
Do not use <button> for navigation; use <a> with a valid href.
3
Provide descriptive text or aria-label for buttons, especially icon-only buttons.
4
If styling a link as a button, ensure it remains accessible with a valid href.

Difficulty: 4/10

Topics: semantic HTML, accessibility, navigation vs actions

Scenario Questions

0-2 years experience

1
You need to add a 'Delete' control to each row in a table of items. Would you use <button> or <a>, and why?
2
For a navigation menu where each item goes to a different page, which element should you choose and what attributes are required?

2-5 years experience

1
Your team built a component that uses <a> tags for form submissions, and now some users report that the page doesn't work when JavaScript is disabled. Explain why this is happening and how you'd fix it.
2
During a code review you notice a mix of <button> and <a> elements for actions like 'Add to cart' and 'View details'. How would you decide which to keep, considering accessibility and SEO?

5-8 years experience

1
In a large e‑commerce platform you need to implement a reusable UI library. How would you design the API for a component that sometimes acts as a navigation link and sometimes as an action button, while keeping semantics correct?
2
Your performance team flags that a page with thousands of <a> elements used for JavaScript actions is causing a high CLS score. What are the underlying reasons and how would you refactor the markup?

8+ years experience

1
Your organization is migrating a legacy monolith to a micro‑frontend architecture. The legacy code uses <a> tags for many interactive controls. What migration strategy would you propose to replace them with proper <button> semantics without breaking existing deep‑linking and analytics?
2
When defining a design system shared across multiple product teams, how do you establish guidelines for when to use <button> vs <a>, and how do you enforce them in CI/CD pipelines?

Follow-up Questions

❓How would you verify that your markup meets WCAG accessibility criteria?
❓What effect does using the wrong element have on SEO and analytics tracking?
❓Can you share a time when an incorrect tag caused a bug and how you fixed it?