What the difference href= "", href= "#" & href= "javascript:void(0)"

The Short Answer:

href="#"?will scroll the current page to the top

href=”javascript: void(0)”?will do nothing.

href="#0"?will do nothing.

Empty HREF

Empty HREF links basically mean?re-navigate the current page. It’s like a Refresh operation that resubmits to the server.

#?by itself

Actually, it is not do-nothing navigation. It causes navigation to the top of the page.

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

<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>        

Javascript: Tags

You may occasionally encounter an HTML document that uses?href="JavaScript:Void(0);"?within an?<a>?element.

Another way to do this is to provide essentially a null JavaScript link. There are many variations for this:

<a href=”javascript:void(0)”>

<a href=”javascript:{}”>

<a href=”javascript:null”>        

The links and text are harmless as they do nothing, but javascript tangs violate?the Content Security Policy. See more?here

Href="#0"

Unless you have a named link or an ID named 0 - This will work. No navigation and no scrolling.

If for some reason you have an ID or named link called 0 use a different non-existing value for the hash works too.

Use a Button or a Span

If your link doesn’t go anywhere, don’t use an?<a>?element. Use a?<span>?or?<button>or something else appropriate and add CSS?(:hover)?to style it as you wish.

Now some frameworks like Bootstrap and Material Design provide custom styling for buttons so that buttons can be styled as links.

For example, in bootstrap you can use:

<button class="btn btn-link btn-sm" id="btnlink">Click Here</button>