Which href value should i use for javascript links or javascriptvoid0

In web front-end development, the href attribute of the <a> element defines the destination of a hyperlink. Its value can be various types, including URLs, bookmarks, or JavaScript pseudo-protocols. Both '#' and 'javascript:void(0)' are techniques used in specific situations to create links that do not trigger page navigation.

When using '#' (anchor), it creates a bookmark link pointing to an element with the same ID on the page. If the ID does not exist, it will cause the page to scroll to the top. If you use only '#' without a specific ID, clicking the link typically causes the page to scroll to the top and updates the URL (adding a '#' at the end).

When using 'javascript:void(0)', it executes an empty JavaScript statement with no effect, and the page does not scroll or change the URL. This method is typically used when you want to attach JavaScript event listeners to perform actions without altering the URL or page position.

Comparison of Use Cases:

• Using '#':

  • When creating a real bookmark/anchor for in-page navigation.
  • If you do not mind URL changes (a '#' is appended to the URL).
  • If you need to detect URL changes via CSS selectors or JavaScript.

• Using 'javascript:void(0)':

  • If you want to prevent URL changes.
  • When you need to avoid page scrolling to the top.
  • When handling click events with JavaScript without anchor navigation functionality.

Examples:

1. Using '#' for in-page navigation:

html
<!-- Define anchor -->
<h2 id="section1">Section 1</h2>
...

<!-- Create link to the anchor -->
<a href="#section1">Go to Section 1</a>

1. Using 'javascript:void(0)' to attach event listeners:

html
<a href="javascript:void(0)" onclick="doSomething();">Click me</a>

<script>
function doSomething() {
    // Perform an action without changing the URL or scrolling the page
    alert('Action performed!');
}
</script>

Best Practices:

In modern web development, it is recommended to use a more semantic approach and avoid 'javascript:void(0)' as it mixes logic (JavaScript code) with markup (HTML). Instead, use event listeners to handle user click events:

html
<a href="#" id="clickableElement">Click me</a>

<script>
document.getElementById('clickableElement').addEventListener('click', function(event) {
    event.preventDefault(); // Prevent default behavior, i.e., no navigation
    doSomething();
});
</script>

This approach maintains clean HTML and maintainable JavaScript, while event.preventDefault() ensures the page does not scroll to the top even with '#'. This is a best practice for enhancing user experience and website maintainability.

The '#' value scrolls the user back to the top of the page, so I generally prefer javascript:void(0).

The javascript:; syntax functions similarly to javascript:void(0);.

Neither is recommended. If you have a meaningful URL, use it as the HREF. If users middle-click your link to open it in a new tab or have JavaScript disabled, the onclick event won't fire. If this isn't feasible, at least use JavaScript with appropriate click event handlers to inject anchor tags into the document. I recognize that this isn't always possible, but I believe it should be pursued when developing any public website. See Unobtrusive JavaScript and Progressive Enhancement (both from Wikipedia).

I use javascript:void(0). There are three reasons.

Encouraging the use of # in development teams inevitably leads some developers to misuse the return value of functions like this:

javascript
function doSomething() {
    // Some code
    return false;
}

They might use return doSomething() but later forget to include return false; in the onclick and simply use doSomething().

The second reason to avoid is that if the called function throws an error, the # link will not execute. Therefore, developers must also remember to handle any errors appropriately within the called function.

The third reason is the presence of cases where onclick is dynamically assigned to event attributes. I prefer being able to dynamically call or assign functions without having to write separate function code for each attachment method. Therefore, my onclick (or any other) HTML attribute looks like this:

javascript
onclick="someFunc.call(this)"

or

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

Using javascript:void(0) avoids all these problematic issues, and I have not found any drawbacks.

Therefore, if you are a solo developer, you can obviously make your own choice, but if you work as a team, you must declare:

Use href="#" and ensure that onclick always includes return false; at the end, that any called function does not throw errors, and if functions are dynamically attached to attributes, ensure that onclick returns and does not throw errors.

Or

Use href="javascript:void(0)"

The second option is clearly easier to communicate.