I'm thinking about the usability of javascript-based controls. I have two main questions:

1. Which elements should we use for javascript events? <a>? <button>?
2. How should we present these to make it clear that they are "action items" rather than "navigation items"?

Here are my (rather hazy) thoughts at the moment:

1. Which elements?

Links
The classic element is a standard link. For example:


This is what I use by default, simply because that's what I've always done. But now I'm beginning to question this markup choice. Why use a link? The standard meaning of the <a> element is this: "I will take you to another page". But javascript links don't do this. How often have you tried to open a javascript link in a tab? I often do; it's annoying.


Buttons
The standard meaning of the <button> element is this: "I will perform some action". Buttons, therefore, seem like a good choice of markup.

Of course, the presenation of a button is independent of the markup. Even if you want your javascript controls to look like links, buttons may be better markup.


Specific controls
Checkboxes and radio buttons are ideal, provided that your action fits their metaphor.

How do people feel about using checkboxes/radios to perform an immediate action, rather than requiring a "submit" or "save preferences" (or whatever) button? Obviously this is bad when the action is disruptive, such as submitting a form; but what about AJAX-style interfaces that give immediate feedback?

(Jakob Nielsen has a good column on checkboxes/radios.)


Pop-up actions (or "false pop-ups")
A typical example is a pop-up help box. By pop-ups, I mean anything that fills this role; personally, I prefer to use "false pop-ups" (in-page CSS/JS <div> effects) rather than annoy users by spawning a new window.

Nevertheless, there's still a usability issue. What kind of element should be used? Links? Buttons?


2. Presentation

Once we've chosen our javascript control element (<a>, <button>, or whatever), how should we style it to help make the behaviour predictable?

Buttons should be fine, as long as they still look like buttons; there's even an argument for applying no special styles, so that you get whatever button style the user is most familiar with. The only trouble with buttons is that they are pretty clunky-looking, especially when deployed en masse.

What about links? I've been distinguishing my javascript links with a different colour (red instead of blue) and a dotted underline (rather than solid). But how effective is this?

For help links, such as links that spawn a pop-up help box, I also like to change the cursor with the CSS { cursor: help }.