Aside from the technical explanation, using javascript:void indicates that the author is not following best practices.

There is really no valid reason to utilize a javascript: pseudo-URL(*). It often leads to confusion or errors when users attempt actions like 'bookmark link' or 'open link in a new tab'. This becomes particularly problematic with features like middle-click-for-new-tab, as it appears to be a regular link but does not function as expected, resulting in blank pages or JavaScript errors.

<a href="#"> could be considered a better alternative, although you must remember to include return false in your onclick event handler to prevent the link from being followed and causing page scrolling.

In certain scenarios, there may be a legitimate reason to link to a specific location. For instance, if clicking on a control reveals a hidden <div id="foo">, it would make sense to use <a href="#foo"> to link to it. Alternatively, if there is a non-JavaScript method available (e.g., 'thispage.php?show=foo' which initially displays foo), you can link to that instead.

If a link only directs to a script, it shouldn't be identified as a true hyperlink. A common practice is to add an onclick to a <span>, <div>, or an <a> without an href and style it to indicate clickability. This was the approach taken by StackOverflow [at that time, though now it uses href="#"].

The drawback of this method is the loss of keyboard accessibility since span/div/bare-a tags cannot be tabbed onto or activated with space. Whether this limitation matters depends on the intended action of the element. While efforts can be made to replicate keyboard interaction with a tabIndex and Space keypress listener, it won't fully replicate browser behavior due to differences between browsers.

If you need an element that acts as a clickable entity without being a link, consider using a <button type="button"> (or

<input type="button"></code for simple text) and restyle it with CSS to resemble a link if desired. Since it functions like a button, it should be marked up accordingly.</p>

<p>(*: excluding bookmarklets, of course. <code>javascript:

pseudo-URLs present a curious concept - a locator that doesn't point to a location but executes active code within the current context. These have led to significant security issues for browsers and web applications and were arguably a misstep introduced by Netscape.)

When you see an anchor tag with an href="#" and onclick="return false;", it means clicking on the link will not cause any navigation to occur. This is commonly used to prevent the default action of a link while still allowing JavaScript functionality to be executed.

A better approach is to use return false directly in the onclick event handler like this:

<a href="#" onclick="return false;">hello</a>

This technique is often employed when the link triggers some sort of JavaScript operation, such as submitting an AJAX form or changing an image. In these cases, ensuring that the function invoked by the link returns false prevents the default behavior.

To enhance user experience, it's recommended to provide an alternative link that performs the same action for users who have JavaScript disabled:

<a href="backup_page_displaying_image.aspx"
   onclick="return coolImageDisplayFunction();">hello</a>

One common technique for incorporating JavaScript functions into HTML links is highly favored by many web developers.
For instance, the [Print] links typically found on numerous websites are often coded in this manner:

<a href="javascript:void(0)" onclick="callPrintFunction()">Print</a>

But why include a href attribute when the same functionality can be achieved with just onclick? The reason lies in the fact that without a href, hovering over the 'Print' text will cause the cursor to become a caret (ꕯ) instead of a pointer (👆). By adding a href to an a tag, it confirms that it is indeed a hyperlink.

Instead of using href="javascript:void(0);", another option is to utilize href="#". This approach eliminates the need for JavaScript to be enabled in the user's browser, making it more universally compatible.

When it comes to website behavior, there is a notable distinction between using # and javascript:void(0);.

While clicking on # will scroll you to the top of the page, javascript:void(0); does not have this same effect.

This discrepancy is particularly significant for developers working on dynamic pages, as users typically do not want to be taken back to the top of the page every time they click on an internal link.

It is recommended to always include an href on your a tags. Even calling a JavaScript function that returns 'undefined' will suffice. Another option is linking to '#'.

Without an href, anchor tags in Internet Explorer 6 do not receive the a:hover style.

While it may seem like a minor crime against humanity, Internet Explorer 6 itself is equally culpable.

I trust that this information proves useful.

The existence of Internet Explorer 6 can be viewed as a significant offense against humanity.

One interesting point to note is that occasionally you may encounter void 0 when checking for undefined, as it is a more concise option.

For instance:

if (something === undefined) {
    doSomething();
}

As opposed to:

if (something === void 0) {
    doSomething();
}

Certain minification techniques substitute undefined with void 0 because of this efficiency.

Using javascript:void(0) in your HTML code indicates the misuse of anchor tags instead of button elements.

Many times, anchor tags are improperly utilized with the onclick event to simulate buttons by setting href to "#" or "javascript:void(0)" to prevent page reloads. However, this practice can lead to unexpected issues when copying or dragging links, opening them in new tabs or windows, bookmarking pages, and encountering problems with JavaScript loading, errors, or disabled scripts. Additionally, it does not provide proper semantics for assistive technologies like screen readers. In such situations, it is advisable to use a <button> element instead. Typically, anchors should only be used for navigation with valid URLs.

Source: Check out MDN's guide on the <a> tag.

When it comes to web development, many developers opt for using javascript:void(0) as a quick and easy way to stop the default behavior of the a tag. By utilizing void(*anything*), which returns undefined (a falsy value), they are able to mimic the effect of return false in the onclick event of the a tag, effectively preventing its default actions.

Overall, javascript:void(0) is often considered the most straightforward method for halting the default behavior of the a tag.

void is a special operator that returns an undefined value in order to prevent the browser from loading a new page.

Typically, web browsers will attempt to load whatever URL is provided, unless it is a JavaScript function that returns null. For instance, if we were to click on a link like this:

<a href="javascript: alert('Hello World')">Click Me</a>

An alert message would appear without triggering the loading of a new page. This is because the alert function returns a null value, causing the browser to recognize there's nothing to load.

It's important to remember that the void operator must always be followed by a value and can't stand alone. It should be used in the following manner:

<a href="javascript: void(0)">I am a useless link</a>

In order to grasp this idea, one must first familiarize themselves with the void operator in JavaScript.

The syntax for the void operator is: void «expr», where it evaluates expr and ultimately returns undefined.

If you were to define void as a function, it would look like this:

function myVoid(expr) {
    return undefined;
}

An important aspect of the void operator is its ability to discard the result of an expression.

There are specific scenarios where returning undefined instead of the actual result of an expression is necessary. This is where void comes in handy. For example, when dealing with javascript: URLs, which should generally be avoided for regular links but can be useful for bookmarklets. When you navigate to a javascript URL, many browsers will replace the current document with the evaluated content of the URL, but only if the result is not undefined. Therefore, if you wish to open a new window without altering the current page, you can achieve this by using the following method:

javascript:void window.open("http://example.com/")

To make a link usable as a display object, it must have an href target specified.

Most browsers do not interpret advanced JavaScript in the href of an <a> element. For example:

<a href="javascript:var el = document.getElementById('foo');">Get element</a>

Due to restrictions on whitespace in the href tag, it is recommended to use event attributes like onClick, onMouseOver, or onMouseOut.

One common approach is to use this technique:

<a href="#" onclick="var el = document.getElementById('foo');">Get element</a>

In order to prevent the page from scrolling to the top, you can use the root anchor # and specify a different location using the name attribute inside the <a> tag.

<a name="middleOfPage"></a>

Similarly, changing the <a> element's href to jump to a specific location while executing JavaScript can be achieved by:

<a href="#middleOfPage" onclick="var el = document.getElementById('foo');">Get element</a>

To keep the link static without any jumping behavior, another method involves:

<a href="#thisLinkName" name="thisLinkCame" onclick="var elem = document.getElementById('foo');">Get element</a>

Alternatively, using JavaScript:void(0); in the href allows inline JavaScript execution without the need for the above strategies:

<a href="javascript:void(0);" onclick="var el = document.getElementById('foo');">Get element</a>

This method ensures that the browser does not navigate anywhere but executes the provided JavaScript code due to its formatting and performance advantages.

The void keyword with a parameter of 0 prevents unnecessary resource consumption and keeps the page display unchanged during execution.

The void operator assesses the specified expression and subsequently provides an undefined result. This action prevents the page from reloading.

Based on my observations, the void operator serves 3 main purposes in JavaScript. The technique you mentioned, using

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

, is a common trick to render an <a> tag without any functionality. Some browsers handle <a> tags differently depending on whether they have a href, so this method allows creating a link with a do-nothing href.

The void operator is a unary operator that takes an argument and returns undefined. Thus, var x = void 42; equates to x === undefined. This feature is handy because, outside of strict mode, undefined can be used as a variable name. Consequently, some JavaScript developers utilize void 0 instead of undefined. In theory, you could also achieve the same result as void(0) by using

<a href="javascript:undefined">

.