DEV Community

Cover image for Let's understand the differences: href="", href="#", and href="javascript:void(0)"
Md Readwan
Md Readwan

Posted on

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)"
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay