Link or button — which to use so Tab, new tabs and Google all work

A "Details" button on a product card. It looks like a button: bright, with rounded corners. Try opening it in a new tab with your mouse wheel. Nothing happened? Then there's no link inside.

Looks have nothing to do with it. What makes an element a button isn't CSS, it's the tag. And the tag decides what the browser lets you do with it: open it in a new tab, press it with the space bar, follow it as a search crawler.

The rule fits into one question: will the address in the browser bar change? Yes — it's a link, <a href>. No, something happens right where you are — it's a button, <button>.

Which is which

A link takes you somewhere: another page, another site, a file, or a spot on the same page. It always has an address — the href attribute.

A button does something: submits a form, opens a dialog, likes a post, adds an item to the cart. It has no address — only an action.

MDN puts it bluntly: use a hyperlink only to navigate to a real URL. For everything else there's a button.

Comparing them on the criteria

• Keyboard. A link fires on Enter. A button fires on Enter and on Space. Someone presses Space on a "button" that's actually a link — and instead of the action, the page just scrolls down.
• New tab. A link can be opened in a new tab: Ctrl+click, mouse wheel, right-click. You can copy its address and send it to a friend. None of that works with a button — there's no address.
• Google Search. Google's crawler follows the addresses in the href of <a> tags. It doesn't click buttons. If your menu or page numbers are buttons, part of your site may stay invisible to search. More in what is SEO.
• Screen reader. It announces "link" or "button". People expect different things: a link should navigate, a button should act in place.
• The link's catch. Without href, an <a> tag isn't a link at all. You can't reach it with Tab.
• The button's catch. Inside a <form>, a button submits the form by default. Even if it's a "Show password" button. Add type="button" to anything that isn't a submit. How to build a form where this doesn't bite you — in the guide on adding a contact form.

Why <div onclick> loses to both

AI code generators often take a third path: a <div> or <span> with a click handler. Or a placeholder link <a href="#"> that actually works as a button. MDN says it outright: links are often abused as fake buttons.

A <div onclick> doesn't get keyboard focus. You can't press it with Enter or Space. A screen reader doesn't know it can be pressed at all. And with a mouse everything works — so the bug stays hidden until you try without one.

You can add role="button" and tabindex="0". But MDN warns: then you have to handle Enter and Space yourself. A real <button> does all of that for free.

Which one fits — a straight answer

A link, even if it's styled like a button:

• "Details", "See all", "Go to catalog";
• menu items, breadcrumbs, page numbers;
• "Sign in", if it leads to a separate sign-in page;
• "Download the price list" — that's a link to a file.

A button, even if it looks like plain text:

• "Send", "Save", "Add to cart";
• opening a dialog, expanding a menu, switching the theme;
• a like, "Show password", "Copy".

How to check your site in a minute

1. Take your hand off the mouse and go through the page with Tab. Every link and button should get a visible focus ring. If something clickable gets skipped, you're looking at a div with a handler.
2. Middle-click everything that leads to other pages. The menu, "Details", product cards. No new tab opened — it's not a link.
3. Press Space on buttons. The button should fire. If the page scrolls down instead, there's a link under the "button".

These three checks catch almost every mixed-up element. The fix is easy: change the tag, keep the styles.

If you write code with AI, add one line to your prompt: "navigation — only <a href> with a real address, actions — only <button type="button">, no div with onclick". That way a whole class of bugs never shows up.

Can I make a link that looks like a button?

Yes, and that's fine. CSS controls the look. What matters is that the right tag for what the element does sits underneath.

What do I do with <a href="#"> in existing code?

Look at what happens on click. If the address changes, put the real address in href. If an action runs, replace it with <button type="button">.

In React, navigation on click goes through navigate(). Is that a button?

For ordinary navigation, use the router's <Link> component — it renders a real <a href>. Then opening in a new tab and copying the address both work. Keep navigate() for navigation after an action, like after saving a form. What React is and why you'd use it — in a separate article.