What is the right href value for a JavaScript anchor tag?

Question

I usually have to bind a JavaScript function to an anchor-click event. That is easy using jquery or the onclick inline attribute.

But, my problem is that I never know what the best way to keep href empty is .

For instance:

1. <a href="javascript:void(0)"> - It seems like a bit too much code for just being empty
2. <a href=#> - If I don't want to move to another page, I must return false in the JavaScript call
3. <a href> - This option breaks the cursor and hover style and the browser doesn't render it as a link
4. <a> - idem

What is the best href value for empty anchors? I'm not interested to keep functionality without JavaScript

Answer 1

The right one is to use an empty a element href attribute and bind the click event in Javascript.

For unobtrusive design, you should have a href attribute with a proper link (so those without Javascript can still use the site) and remove the attribute in Javascript, binding the click event.

If you are simply using the a element as a target to bind the click event to, consider using a div or span instead.

Answer 2

Simply do not use A element. You can as well make DIV clickable or any other element.

Or you can also simply leave href attribute out, like so.

<a onclick="myFunction();">dasd</a>

If you also want to look it like a link, put this in CSS:

a {
  text-decoration: underline;
  color: blue;    
}​

Answer 3

I'm personally a firm believe in using JavaScript to extend functionality, not replace. With that said, I leave anchors pointing to a "safe" fall-back of the action I'm really just executing with javascript. Simply put:

<a href="/users/create" class="user-create"></a>

Then, supplement (and return false) if javascript was able to successfully load and bind to the element, otherwise still provide the user the ability to accomplish the task if they don't have javascript (either blocked via plugin or just not loaded).

Answer 4

<a href=#>ABC</a>

=> on click of above link it will set url in address bar which makes flickering of document or resetting scroll position

to avoid above problem, <a href=# onclick="return false" >abc</a> can be used and bind event handler using jQuery as usual or you can execute any function on onclick which return false value.

Answer 5

I think

<a href="javascript:;"></a>

or

<a href="javascript:void;"></a>

is the best way to indicate empty anchor.

and

<a href="#someId"></a>

will move the page to the dom element which has id="someId"

Answer 6

it all depends. if you are clicking an anchor to open a panel on the page then I am happy to use option 2 but only if I insert that anchor with javascript.

this then means with javascript disabled the anchor doesn't show and the panel should be visible.

if the link goes somewhere then you need the actual link address like brad christy and odid said.