href='#' vs javascript:void(0): Best Practice Guide

The best practice for href values in JavaScript links has evolved significantly in modern web development. While both href="#" and href="javascript:void(0)" can technically work for triggering JavaScript functions, href=“javascript:void(0)” is generally preferred for most use cases due to its cleaner handling of default actions and better user experience. However, the most modern approach is to avoid using <a> elements entirely for JavaScript-only actions and instead use semantic <button> elements.

Contents

• Functionality Comparison
• Performance Considerations
• Validation and HTML Standards
• Accessibility Implications
• Modern Best Practices
• Recommendations for Different Scenarios
• Conclusion

Functionality Comparison

The key difference between these two approaches lies in how they handle default browser behavior:

href=“#” approach:

• When clicked, the browser attempts to navigate to the top of the current page
• This causes an unwanted scroll to the top of the page unless you prevent it in JavaScript
• Requires explicit return false in the onclick handler to prevent the scroll
• Example: <a href="#" onclick="myJsFunc(); return false;">Run JavaScript Code</a>

href=“javascript:void(0)” approach:

• Uses the JavaScript void operator, which evaluates the expression (0) and returns undefined
• Prevents any default navigation behavior without requiring additional JavaScript
• Doesn’t cause page scrolling even if the JavaScript function fails
• Example: <a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>

As noted in the Stack Overflow discussion, these approaches don’t actually do the same thing - # makes the browser jump to the top of the page, while javascript:void(0) maintains the current position.

Performance Considerations

Performance differences between these approaches are generally minimal but worth considering:

href=“#” performance:

• Simpler URL parsing for the browser
• No JavaScript evaluation required by the browser’s navigation system
• May trigger page scroll which requires additional processing

href=“javascript:void(0)” performance:

• Requires the browser to parse and evaluate JavaScript code
• Benchmarking suggests it might offer a slight performance edge in some browsers like Google Chrome (0.18 seconds faster in some tests)
• According to Our Code World, javascript:void(0) is “raw, precise and fast”

However, 30 seconds of code warns that javascript:void(0) causes the browser to parse the link URL value, which “is both costly and unnecessary.”

Validation and HTML Standards

From a validation and standards perspective:

href=“#” validation:

• Valid HTML5
• Follows the principle that links should point to actual resources
• May cause validation warnings in accessibility checkers when used with onclick

href=“javascript:void(0)” validation:

• Technically valid HTML
• Considered an “abuse” of the anchor tag according to MDN documentation
• Inline JavaScript in href attributes is generally discouraged in modern web development

As Christian Heilmann states, “The correct answer is none. This is not what anchors are for. An anchor element should have a href attribute that points to a valid URL resource.”

Accessibility Implications

Accessibility is a critical consideration when choosing between these approaches:

href=“#” accessibility issues:

• Unexpected page scrolling can disorient users, especially those with motor impairments
• Screen readers announce it as a link to the top of the page, which is misleading
• Can cause issues with keyboard navigation and focus management

href=“javascript:void(0)” accessibility benefits:

• According to Reddit discussions, it “avoids disrupting the user’s navigation flow”
• Doesn’t cause unexpected scrolling behavior
• Better maintains the user’s current context and focus

However, the most significant accessibility recommendation comes from MDN, which states that “Anchor tags are often abused with the onclick event to create pseudo-buttons by setting href to ‘#’ or ‘javascript:void(0)’ to prevent the page from refreshing.”

Modern Best Practices

Modern web development has evolved beyond both of these approaches:

The semantic approach:

• Use <button> elements for JavaScript-only actions instead of <a> tags
• Buttons are semantically correct for actions that don’t navigate to new resources
• Better accessibility and keyboard navigation out of the box

The event listener approach:

• Move JavaScript logic out of HTML markup and into separate .js files
• Use event listeners instead of inline onclick handlers
• Example:
  html

  <button id="myButton" class="link-styled-button">Run JavaScript Code</button>
  

  javascript

  document.getElementById('myButton').addEventListener('click', myJsFunc);
  

As noted in SQLPEY, “Moving JavaScript logic out of HTML markup and into separate .js files or