CODEWITHSUNDEEP
htmlhref
Raiders
Raiders

Reputation: 119

What is the difference between href="", href="#" and href="javascript:void(0)"?

What is the difference between href="", href="#" and href="javascript:void(0)"?
What are the different uses for them and when is one better than another?

Upvotes: 12

Views: 15565

Answers (6)

Paul
Paul

Reputation: 141877

href="" will reload the current page

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

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

You can get the same effect of javascript: void(0) by returning false from the click event handler of the anchor with either of the other two methods as well.

I prefer to use <a id="the-link" href="#">Link</a> and then bind an event handler to the click listener somewhere in my javascript like:

document.getElementById('the-link').onclick = function(){ 
    // Do stuff
    return false;
};

This way, since you're using #, even if the user has javascript disabled the page won't reload (it will just scroll to the top), and I think it's a lot cleaner looking than javascript: void(0)

Upvotes: 17

Sheo Dayal Singh
Sheo Dayal Singh

Reputation: 1673

The href attribute defines the URL of the resource of a link. If the anchor tag does not have href tag then it will not become hyperlink. The href attribute have the following values:

1. Absolute path: move to another site like href="http://www.google.com"
2. Relative path: move to another page within the site like herf ="defaultpage.aspx"
3. Move to an element with a specified id within the page like href="#bottom"
4. href="javascript:void(0)", it does not move anywhere.
5. href="#" , it does not move anywhere but scroll on the top of the current page.
6. href= "" , it will load the current page but some browsers causes forbidden errors.

Note: When we do not need to specified any url inside a anchor tag then use

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

Upvotes: 0

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

They are two different links:
1. href="" will redirect the user to the root page. More like the default page or the index page.
2. href="#" Will not redirect the user but also will not do anything but just a change in the URL. Its just to make a URL like button I mean a anchor like button. But no where to go with it. 3. If you want to do some javascript job with it. You can use 

<button onclick="dothis()">Click me!</button>  
function dothis() {
// do what ever you want to do here
}

The third type won't change the url, won't redirect!

Upvotes: 0

Guffa
Guffa

Reputation: 700592

If you use href="", some browsers might think that the anchor tag is not a link, but an anchor. Then it would not get the behaviour and events of a link. Even if it works in the browsers that you can test, it's safer not to use an empty value.

Often the no-name bookmark href="#" is used. It's the same as linking to any bookmark, like href="#contact", except that the no-name bookmark leads to the top of the page. This works as a decent fallback if the Javascript doesn't work, as it only takes you to the top instead of navigating somewhere else. Sometimes you see that the developer forgot to stop the default action of the link, and the page jumps to the top while the script does what it does.

Using href="javascript:void(0)" is a way to produce an URL that doesn't lead anywhere at all, so the link won't be followed. It works well, but as the URL is showed in the status field when you point at the link in most browers, it doesn't look as pretty.

Upvotes: 0

Stephen Wood
Stephen Wood

Reputation: 846

href="" will link to the same page as the one you are currently on, effectively refreshing the page. href="#" will not refresh the page, but using the # will make the screen move to the top of the page (it is the browser effectively looking for an anchor with no name, ). javascript:void(0) will prevent anything happening on the link at all.

I use # when I want to put links in and I'm not sure where they go, for example when creating a page layout. I usually use a form action="" if I want to post the form to the same page, but I have never personally used href="" or javascript:void(0).

Upvotes: 1

user195488
user195488

Reputation:

'#' will take the user back to the top of the page, so I usually go withvoid(0).

Three reasons. Encouraging the use of # amoungst a team of developers inevitably leads to some using the return value of the function called like this:

function doSomething() {
    //some code
    return false;
}

But then they forget to use return doSomething() in the onclick and just use doSomething().

A second reason for avoiding # is that the final return false; will not execute if the called function throws an error. Hence the developers have to also remember to handle any error appropriately in the called function.

A third reason is that there are cases where the onclick event property is assigned dynamically. I prefer to be able to call a function or assign it dynamically without having to code the function specifically for one method of attachment or another. Hence my onclick (or on anything) in HTML markup look like this:

onclick="someFunc.call(this)"

OR

onclick="someFunc.apply(this, arguments)"

Using javascript:void(0) avoids all of the above headaches and I haven't found any examples of a downside.

So if you're a lone developer then you can clearly make your own choice but if you work as a team you have to either state:

use href="#", make sure onclick always contains return false; at the end, that any called function does not throw an error and if you attach a function dynamically to the onclick property make sure that as well as not throwing an error it returns false.

OR

use href="javascript:void(0)"

The second is clearly easier to communicated.

Upvotes: 4

Related Questions