Links or Buttons? How to Choose the Right HTML Control
Use links for navigation and buttons for actions, then write labels that make the result clear before someone clicks.
The short version
If the destination changes, use a link. If the current interface changes, use a button.
Match the element to the behavior
A link takes the reader to a resource with a URL. A button submits, opens, toggles, or changes something in the current experience. Native elements bring keyboard behavior, focus handling, semantics, and browser features for free.
A clickable div has none of those guarantees. Rebuilding them correctly takes more work than using the element already designed for the job.
<a href="/blog/semantic-html-guide">Read the semantic HTML guide</a>
<button type="button" aria-expanded="false" aria-controls="filters">
Show filters
</button>Write labels around the outcome
Avoid repeated labels such as “Click here” and “Learn more.” Link text should make sense when read out of context. Buttons should name the action: “Publish page,” “Save draft,” or “Open comments.”
Preserve familiar browser behavior
- Let links open in the same tab unless there is a strong reason not to.
- Do not disable zoom or text selection around controls.
- Keep visible focus styles.
- Use type="button" for buttons that should not submit a form.
- Make the hit area comfortable on touch screens.