Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

Using "javascript:void(0)" over "#"

Avoiding scroll jumps: The href="#" can cause undesired page scrolling, whereas javascript:void(0) prevents scrolling and doesn't change the view.

Robustness in team settings: Using javascript:void(0) establishes a clear standard to avoid discrepancies in team projects.

Separate JavaScript from HTML: Keeping JavaScript separate from HTML improves code maintainability and scalability. Use event listeners instead of inline onclick handlers.

Accessibility and progressive enhancement: Ensure a functioning href alternative for situations when JavaScript is disabled.

Non-link elements: Use <button> elements styled with CSS when a link is not required for the action. It makes for clearer intent and accessibility.

Making the right choice between "javascript:void(0)" and "#"

Handling middle-click navigation: By avoiding href="#"and javascript:void(0), we cater to users who expect middle-click or Ctrl+click to open new tabs, while ensuring functionality without JavaScript.

Avoiding scrolling to top: If you use href="#", clicking the link might move the view to the top of the page. Using javascript:void(0) circumvents this problem.

Preventing undesired history entries: The javascript:void(0) won't affect your browser's history stack, making it a safer option compared to href="#".

Semantic use of HTML elements: Using the <button> element for actions and <a> for actual navigation helps distinguish between the two types of elements visually and functionally, improving both accessibility and search engine optimization.

Best Practices for Accessible and Maintainable Code

Planning for non-JavaScript scenarios

Always remember to provide a fallback for users with JavaScript disabled:

<noscript>
  <a href="/fallback">Fallback action for non-JS users</a>
</noscript>


This way, the content remains accessible even when JavaScript is turned off, embracing a strategy of progressive enhancement.

Styling Buttons as Links

You can style a <button> element to look like a link, to avoid misusing <a> elements for actions that do not involve navigation:

.button-as-link {
  color: #0066ee;
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
}


This approach maintains semantic accuracy while ensuring visual consistency.

Decoupling HTML and JavaScript

To keep your JavaScript neatly organized and separate from your HTML, add event listeners from your JavaScript file instead of using inline event handlers in the HTML:

// Get the Quokka party started
document.getElementById('quokkaParty').addEventListener('click', function(event) {
  // Hold your Quokkas! Let's prevent navigation.
  event.preventDefault();
  // It's celebration time! 🥳
  startQuokkaParty();
});


This modular approach allows you to maintain dynamic page content more efficiently.

HTML validation

Avoid browser and accessibility issues by ensuring your HTML is valid. You can omit the href attribute if you make sure to use the correct HTML element for the job.