Buttons and Links examples

Implicit Semantic Meaning

We lose implicit semantic meaning when using a tag other than <a> or <button> for interactive controls.

This is a span pretending to be a button

Keyboard Triggering

Links are triggered with the Enter key, buttons are triggered with the Space or Enter key. Links with a button role should account for that.

This is a link with a button role

Pointer Cursor

The pointer cursor shouldn't be on anything but links, because of their weak affordance. [1]

Last Resort

There are times when you absolutely can't use <a> or <button>, in these cases you must provide the semantic meaning and functionality.

This is a div pretending to be a button