How to make an anchor tag refer to nothing?

Navigating the minefield: common traps

In web development, we often need to craft elements that don't navigate anywhere but trigger actions or act as placeholders. Understanding different methods and their implications is essential.

The sneaky href="#" pitfall

It's a common pattern but can cause unexpected jumps. You can avoid this by preventing default action:

//href="#" is just casually taking you to the top. No big deal!
$('#yourLink').on('click', function(ev) {
  ev.preventDefault();
});


Rethinking the use of javascript:void(0)

While "javascript:void(0);" does the trick, it might break things in Internet Explorer or similar antiquated browsers. Just for those times when you time-warp to 2001.

Making spans impersonate buttons

You can use the <span> tag with cursor:pointer; to create a visually identical stand-in. Remember to ensure keyboard navigation and accessibility:

<span tabindex="0" onkeypress="yourKeyPressFunction(event)" onclick="yourClickFunction();" style="cursor: pointer;">Click me</span>


Handling events thoughtfully

The event.stopPropagation() and event.preventDefault() methods are crucial for controlling the flow, or shall we say, stemming the tide of click events.

Choosing the less-travelled path: alternatives

Just because a link looks like a link, doesn't mean it has to act like one. Let's explore some alternatives:

Custom handling with JavaScript

JavaScript and jQuery allow you to attach behaviors to elements. With great power comes great responsibility, so use these carefully:

$(document).on('click', '#yourCustomLink', function(ev) {
  // Your custom behavior here, it's party time!
  ev.preventDefault(); 
  ev.stopPropagation();
});


Ensuring accessibility

Don't forget about accessibility. It's not a myth, but a vital aspect of your application that makes it accessible (pun intended) to all potential users!

Pushing the envelope: best practices

Gaining a deep understanding of anchor tags can help improve your development routines.

Leveraging JavaScript

With JavaScript or jQuery, you can add value without creating chaos in your application. In other words, one does not simply make a link that does nothing.

Maintaining user expectations

No matter how innovative the underlying technology gets, it's important to not leave the user hanging. Keep your links behaving predictably or make deviations clear.

Combining style and function

Style's not just about looking good—it's about signalling functionality.
Create links that can stand proud, saying "I may do nothing clickable, but boy do I look clickable!"