Let's understand the differences: href="", href="#", and href="javascript:void(0)"

Empty HREF: href=""

Using an empty href attribute (href="") reloads the current page. This is like clicking the refresh button of the browser.

href="#"

The href=”#” attribute makes the page scroll to the top. If you don’t want this, you can stop the behavior with JavaScript:

<a href=”#” onclick=”return false;”>Hey</a>
<!--! and there ane many ways with js to achive this -->

href="javascript:void(0)"

Sometimes you will see href="javascript:void(0);" inside an <a> tag. This makes a link that does nothing when clicked. Other ways to do this are:

• href="javascript:{}"
• href="javascript:null"

These links do nothing it’s best to avoid them.

href="#any_id"

The href="#any_id" attribute does nothing unless have an element with an ID of any_idon the page. By clicking the link will scroll to that element.
To avoid any scroll use a different id value that doesn't exist on the page.

Best Practices:

Use a Button or Span: If your link doesn’t navigate anywhere, you can use <button> or <span> instead of an <a> element as well as you can style these elements as needed using raw CSS or CSS framework.

Lastly, let’s summarize these

href="#" scrolls the current page to the top.

href="javascript:void(0)" does nothing.

href="#any_id" does nothing unless there is an element with the specific ID.

And finally

I’m appreciative that you read my piece. Please remember to clap and share this post with your fellow developers.