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

When creating JavaScript links in HTML, the recommended practice is to use "javascript:void(0)" instead of "#". Both options prevent the default behavior of navigating to a new page, but "javascript:void(0)" is generally considered more accessible and less likely to cause unexpected behavior.

Using "#":

html

<a href="#">Click me</a>

Using "javascript:void(0)":

html

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

The difference lies in how different browsers handle the clicks and their impact on user experience:

    Using "#": When you use "#" as the href value, some browsers might scroll the page to the top. If you're not using an anchor tag with a matching id, this can be jarring for users.
    Using "javascript:void(0)": This value ensures that no navigation or scrolling happens when the link is clicked. It's a way to indicate that the link doesn't have a specific destination but is being used to trigger JavaScript functionality.

However, a more modern and accessible approach is to use an event listener in JavaScript to handle the click event and prevent the default behavior, regardless of the href value. This allows you to keep the href attribute meaningful for users who navigate using assistive technologies.

Example using event listener:

html

<a href="#" id="myLink">Click me</a>

<script>
document.getElementById("myLink").addEventListener("click", function(event) {
  event.preventDefault();
  // Your JavaScript code here
});
</script>

In this example, the event.preventDefault() call prevents the default behavior of the link, regardless of the href value. This approach provides more control and ensures a better user experience for all users, including those who use assistive technologies.