From usability point of view:
In most of website we can see a link which do an action such as "Delete" link which deletes a record for example, "Add Comment", "Vote Up", ....

Is it better to put the javascript action in the href attribute of the anchor html tag:

<a href="javascript:RemoveMe(132);"> Remove</a>

Or do it in an event:

<a href="#" onlcick="RemoveMe(132)"> Remove</a>

The different between these 2 ways, is how the user will see the link in his browser status bar.
In the fist way the user will see in the status bar: javascript:RemoveMe(132);

But in the second way the user will see in the status bar: www.example.com/pagesample/#

Which is better from usability point of view? which is the common to use?

  • I'd like to know how many people look at the status bar for buttons (or anchors that masquerade as buttons). I know for typical hyperlink anchors, I always look at the status bar to make sure I'm not being tricked into clicking into a virus/porn site. I can't say I've ever looked at the status bar for buttons.
    – JoJo
    Commented Mar 6, 2011 at 1:44
  • I am talking at links, anchor tags Commented Mar 6, 2011 at 2:23
  • 2
    Your anchor tags are mimicking the semantic function of buttons. You're using anchors to execute javascript, not go to a new page. Supposedly, you'll also style your "anchor-buttons" to look like buttons, because that's what they are. To the end user, they don't care about your implementation. They only care about what they see. At the end of the day, we will have to ask what is the general behavior when dealing with buttons (or anchors masquerading as buttons).
    – JoJo
    Commented Mar 6, 2011 at 6:31
  • You shouldn't be putting JavaScript inline at all. Keep it out of HTML, it doesn't belong there.
    – zzzzBov
    Commented Feb 4, 2013 at 3:15

6 Answers 6


It’s better to put remove link to the href and javascript handler in the onclick.

<a href="/123/remove/" onclick="RemoveMe(132); return false">Remove</a>

This way users without javascript will still be able to use your app (but with a redirect to another page), and those who have javascript enabled will use javascript version. Both of them will see a meaningful link in the status bar.

If the action is meaningful only in this page only (show/hide smth, load more data, for example), than you should not use <a> tag here. Use styled <span> with dotted underline, for example.

In both cases, it’s also a good thing to write a title attribute to your link that explains what will happen (it will be shown in tooltip), for users who don’t use status bars.

  • 2
    onlcick? onlick? :p Commented Apr 18, 2012 at 18:43
  • Well done from a technical and UX POV
    – Itumac
    Commented Feb 3, 2013 at 4:16
  • 1
    I have to disagree. HTML belongs in .html files, CSS belongs in .css files, JavaScript belongs in JS files. You should not be adding inline event handlers at all, instead bind events from a JavaScript file, and leave the [href] as an actionable link.
    – zzzzBov
    Commented Feb 4, 2013 at 3:15

The best option in this case is neither: use a <button> tag instead (with an onclick handler) as this is better for semantics and accessibility.

  • Buttons are very hard to deal with. I would recommend anchors in most cases, even though it's semantically incorrect. Buttons have extra padding in Firefox, even with a CSS reset (stackoverflow.com/questions/5122192/…). Buttons appear wider in Internet Explorer 6 and 7. IE6 is missing certain CSS properties.
    – JoJo
    Commented Mar 6, 2011 at 1:42

From a pure usability POV, this is irrelevant. What's more important is how you're visually indicating clickable items.

From a code management POV, it's best to apply the onclick events dynamically after the DOM loads rather than sticking everything inline (this is how jQuery works, for example).

From an accessibility standpoint, things get more complicated. With JavaScript heavy interfaces, study up on the ARIA attributes and techniques.


It's better to add it dynamically. So if the user has javascript disabled he doesn't get useless buttons/links.

But if it comes down to it, the second. www.example.com/pagesample/# is not better from a usability standpoint at all. How is (potentially) moving the users screen to the top better? It doesn't say anything the user might understand either.


Event, definitely. Remember, that links can be bookmarked/drag&dropped/opened in another tab and so on. I prefer to make actions as events, and links behind them point to "#" (dummy) or something what can be bookmarked (current page).


Both ways are bad, because they are not true links. But the first way is less worse than the second way. At least, it has something vaguely meaningful and related to the link goal in the href attribute. In addition, it is a little more accessible, because the action is tied to the activation of the link, not to the click of the link.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.