When should you use vs ?

Both ` ` and ` ` are interactive elements, but they serve different purposes. Choosing the correct element ensures proper semantics, accessibility, and user experience. ` ` – Represents a link to another page, resource, or section within the page. Primary purpose: navigation. ` ` – Represents an action or command on the current page, such as submitting a form, opening a modal, or toggling content. Use ` ` when navigating to a new URL or location. Example: ` About Us ` Use ` ` when performing an action on the current page. Example: ` Submit ` Correct use helps screen readers and other assistive technologies convey the proper role. Misusing these elements can confuse users. Do not use ` ` for actions that do not navigate; use ` ` instead. Do not use ` ` for navigation; use ` ` with a valid `href`. Provide descriptive text or `aria-label` for buttons, especially icon-only buttons. If styling a link as a button, ensure it remains accessible with a valid `href`.

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

Difficulty: 4/10

semantic HTML, accessibility, navigation vs actions

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.

Scenario Questions

0-2 years experience

2-5 years experience

1Your 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.

Follow-up Questions