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 or 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.