This content originally appeared on DEV Community and was authored by Md Readwan
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.
This content originally appeared on DEV Community and was authored by Md Readwan
Md Readwan | Sciencx (2024-07-06T12:51:46+00:00) Let’s understand the differences: href=””, href=”#”, and href=”javascript:void(0)”. Retrieved from https://www.scien.cx/2024/07/06/lets-understand-the-differences-href-href-and-hrefjavascriptvoid0/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.