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.
Top comments (0)