Should I use '#' or 'javascript:void(0);' on the href attribute of my empty links

If you encourage the use of #, and prevent the default behaviour (scroll to the top of the document), it inevitably leads to some using the return false value of the function in the onclick event i.e :

<a href="#" onclick="return false;">Hey</a>
<!-- Or -->
<a href="#" id="link">Hey</a>    
<script>
    document.getElementById("link").addEventListener("click",function(){
        return false;
    },false);
</script>

And if you use javascript:void instead, you don't need to return false on the click event as said before, void(0) is the smallest possible script that evaluates as undefined i.e :

<a href="javascript:void(0);">Hey</a>

The same effect as using href="#", smaller and clearer.

javascript:void(0)

When using javascript: in navigation the return value of the executed script, if there is one, becomes the content of a new document which is displayed in the browser. The void operator in JavaScript causes the return value of the expression following it to return undefined, which prevents this action from happening.

The reason you’d want to do this with the href of a link is that normally, a javascript: URL will redirect the browser to a plain text version of the result of evaluating that JavaScript. But if the result is undefined, then the browser stays on the same page. void(0) is just the smallest possible script  that evaluates as undefined.

However, javascript:void(0); violates Content Security Policy on CSP-enabled HTTPS. Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross-Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft to site defacement or distribution of malware.

Therefore, if you're a standard religious developer, you may want to use href="#" instead of javascript:void to prevent breaking any law.

href="#"

The hash is safest, just in case your user has Javascript disabled.

You can solve it easily using jQuery to all the links with this value in your document :

$('a[href="#"]').click(function(e) {
    e.preventDefault ? e.preventDefault() : e.returnValue = false;
});

Note that you can too even return false directly in the onclick attribute of the element which will have the same effect :

<a href="#" onclick="return false;">Hey, i'll do nothing</a>

Conclusion and recommendations

Use the javascript:void(0) if you want to be raw, precise and fast.

Use href="#" and prevent the default event with javascript to be a standards follower.

• If your link doesn't go anywhere, don't use an <a> element. Use a <span> or something else appropriate and add CSS (:hover) to style it as you wish.
• Presentation should not be mixed with content. That means no javascript:action and neither no onclick attributes, instead prevent the default event using plain Javascript.