tips

Tip 026 - Links and Buttons

Really short one today - have you put much thought into whether your project calls for a button as opposed to a link? In fact, they're very different, even though they're used in the wrong situations all the time.

Links (<a> tags) direct the browser to another location. Sometimes they carry extra data in the form of a anchor target or a query string. But links move you from place to place.

Buttons (<button> tags) make something happen with JavaScript. Performing some action in your app when the user wants to do a thing calls for a button.

There is grey areas, as usual. Maybe your app is a really neat one where a button does something, but also changes the current URL for sharing or convenience. Maybe your link is carrying enough information to its destination that when it gets there and does something, it feels like a button. Just consider the core reason for the choice. And when the situation could maybe be both, just remember that links always work in a browser. For a button to work, all the JS also has to work. So you could enhance links into buttons based on some tests, a la progressive enhancement.

TL;DR Links go places, buttons do things, semantics are cool and accessibility is a thing. Still.

 

Have you written a reply to this post? Send me the URL here: