snippetjavascriptTip
Avoid "javascript:void(0)" for empty links
Viewed 0 times
javascriptlinksavoidemptyvoidfor
Problem
There are various ways to create an empty link, but some options are more appropriate than others. One of the most common debates about it is if one should use
Generally, you want to avoid
With that out of the way, it's clear that
Finally, when creating an empty link, one should always consider more semantically appropriate alternatives, such as a
href="", href="#" or href="javascript:void(0)".Generally, you want to avoid
href="javascript:void(0)", as it will cause the browser to parse the value of the link URL, which is both costly and unnecessary. It also introduces a potential XSS security vulnerability, as javascript: URLs violate Content Security Policy (CSP).With that out of the way, it's clear that
href="" or href="#" should be preferred in most cases. One key difference between the two is that href="#" points to the top of the page whereas href="" points to the current page. This can have unwanted side-effects, such as scrolling to the top of the page or issues with link styling respectively. To prevent either one of them from acting as links, you can use Event.preventDefault() and handle them appropriately using JavaScript.Finally, when creating an empty link, one should always consider more semantically appropriate alternatives, such as a
<button>, <div> or <span> tag. After all, a link should always behave like a link and hijacking it with JavaScript or any other means is bound to run into some accessibility problems sooner or later.Solution
With that out of the way, it's clear that
Finally, when creating an empty link, one should always consider more semantically appropriate alternatives, such as a
href="" or href="#" should be preferred in most cases. One key difference between the two is that href="#" points to the top of the page whereas href="" points to the current page. This can have unwanted side-effects, such as scrolling to the top of the page or issues with link styling respectively. To prevent either one of them from acting as links, you can use Event.preventDefault() and handle them appropriately using JavaScript.Finally, when creating an empty link, one should always consider more semantically appropriate alternatives, such as a
<button>, <div> or <span> tag. After all, a link should always behave like a link and hijacking it with JavaScript or any other means is bound to run into some accessibility problems sooner or later.Context
From 30-seconds-of-code: void-links
Revisions (0)
No revisions yet.