Let links behave like links

People who use the web for a while build up expectations, mostly without noticing. Links open in new tabs when you middle-click them (alternatively, Ctrl-click on Windows, cmd-click on Mac), right-click for the context menu with “copy link address” in it. Hover shows the destination in the corner. Browsers spent decades agreeing on this, which I’m happy enough to celebrate.

And yet. Somewhere in many codebases sits a <div> with an onClick that calls router.push(), styled to look exactly like a link. It navigates, technically. It also ignores middle-click, breaks “open in new tab,” doesn’t show up in the tab order, says nothing to a screen reader, and can’t be copied, bookmarked, or previewed. Every expectation the user brought with them quietly fails, one interaction at a time. The user doesn’t file a bug about this. They just come away with the vague sense that your site is slightly broken, without being able to say why.

The usual reason this happens is understandable: a framework or an abstraction made the click handler the path of least resistance, and the anchor tag felt like it belonged to a different, older web. But an <a href> isn’t legacy. It’s a full feature set you get for free: keyboard focus, the context menu, modifier keys, prefetch hints, sensible screen reader announcement, and navigation that works before your JavaScript arrives. Reimplementing all of that on a click handler is possible, in the sense that most things are possible. You’d be maintaining a worse link, by hand, forever.

This extends to in-page navigation, which anchors have handled since roughly the beginning of time. href="#section" jumps to an element with id="section". Add scroll-behavior: smooth in CSS and it glides there, no scroll library required.

The takeaway is not exciting, which is rather the point. If it navigates, use <a>. If it performs an action, use <button>.

The established elements are not merely suggestions.