Buttons Are for Actions, Links Are for Navigation

Links take users somewhere. Buttons perform an action. Mixing them up not only confuses your code, but also misleads users and breaks accessibility for people using screen readers or voice control.

In general terms:

• If an element navigates to another page or resource, it should be an <a>.
• If it triggers an action (like opening a modal, submitting a form, or toggling content), use a <button>.

Good Practice

• Use semantic HTML that reflects purpose.
• Add aria-label, aria-controls, and appropriate type when needed.
• If you must create a custom component, ensure it communicates its role, name, and state to assistive tech.

Examples:

Bad:

<a href="#" onclick="openMenu()">Menu</a>

This is not a link (it doesn’t go anywhere).

It lacks keyboard behavior and assistive semantics unless patched manually.

Better:

<button type="button" aria-controls="menu">Menu</button>

We do this under the assumption that openMenu() toggles visibility of an element with id="menu". Also, it is important to specify type="button" to prevent it from acting as a submit button in forms. It is the classical thing that does not harm, but it is forgotten and causes bugs.

Let’s continue with another example.

Bad:

<button onclick="location.href='/pricing'">Pricing</button>

This is navigation and should be a link.

Better:

<a href="/pricing">Pricing</a>

When you are checking the quality of your or someone else’s code, watch out for these common mistakes:

• Using <a href="#"> just to attach JavaScript handlers.
• Wrapping block elements (like divs) with links for style without considering semantics. For example, a card that navigates should be a link, but if it has multiple interactive elements inside, consider the structure carefully.
• Using <span> or <div> with click handlers instead of proper buttons or links.
• Forgetting type="button" on <button>, which can cause accidental form submissions.

Do this today: Search your codebase for href="#", or for onclick used on links or non-interactive elements. Replace fake links with proper buttons or real anchors.