When you start learning JavaScript, you often see small pieces of code that look strange. One of them is –
<a href="javascript:void(0);">Click Here</a>
At first glance, this code looks confusing. Why would someone write javascript:void(0); inside a link? Why not use a normal URL? What does void(0) even mean?
Many beginners ignore it. Some developers copy it without understanding it. Others say you should never use it.
In this guide, I will explain what javascript:void(0); really does, why developers should use it, and when you should avoid it. I will use simple examples so that you can clearly understand the basic concept.
Understanding the Basic Idea
Let’s break this small code into parts, so that you can understand it easily –
- javascript: tells the browser to execute JavaScript code.
- void is a JavaScript operator.
- void(0) returns undefined.
When you write:
javascript:void(0);
You tell the browser:
“Run this JavaScript code, but do not return any value and do not navigate anywhere.”
The void operator evaluates an expression and always returns undefined. Developers usually write void(0) because 0 is simple and clear. They could also write void(1) or void(“hello”). The result would still be undefined.
So the main purpose of javascript:void(0); is to execute JavaScript without changing the page.
Why Developers Use javascript:void(0);
Normally, an anchor tag needs a valid URL.
Example:
<a href="https://example.com">Visit Website</a>
When users click the link, the browser navigates to a new page or the page we put link inside the href attribute.
But sometimes, developers do not want navigation. They only want to trigger a JavaScript function. In that situation, they use:
<a href="javascript:void(0);">Open</a>
This stops the browser from reloading or moving to another page.
Let’s understand this with real use cases.
Case #1 – When We Open a Dropdown Menu
Imagine you build a website header with a “Services” menu. When users click “Services,” you want to show a dropdown list.
You do not want the page to reload. So, some developers write –
<a href="javascript:void(0);" onclick="toggleMenu()">Services</a>
When users click:
- The browser does not navigate.
- The toggleMenu() function runs.
- The dropdown opens or closes.
This approach works perfectly, and Many older websites still use it.
However, this is not the cleanest method in modern development.
Case #2 – When Triggering a Popup Modal
Suppose you want to show a login pop-up when users click “Login.” You might see code like this –
<a href="javascript:void(0);" onclick="openLoginModal()">Login</a>
Here:
- The link does not go to another page.
- The JavaScript function opens a modal window.
This method prevents unnecessary page refresh and keeps the user on the same screen.
Case #3 – AJAX-Based Actions
In older AJAX-based websites, developers often used javascript:void(0); for dynamic actions.
Example:
<a href="javascript:void(0);" onclick="loadMorePosts()">Load More</a>
When users click:
- JavaScript fetches new data.
- The page updates dynamically.
- The browser does not reload.
Before modern frameworks like React or Vue became popular, developers used this pattern frequently.
How the void Operator Works Internally
Now let’s go deeper.
The void operator takes any expression and returns undefined.
Example:
void(5); // undefined
void("hello"); // undefined
void(true); // undefined
It evaluates the expression but ignores the result.
In the case of javascript:void(0);, the browser runs the JavaScript expression and returns undefined. Since it returns nothing useful, the browser does not replace the current page.
That is why developers use it to prevent navigation.
Why Should Avoid javascript:void(0) –
Even though it works, modern development practices recommend better alternatives.
We have list out the main reasons, here are the main reasons.
➤ It Breaks Semantic HTML
An anchor tag should represent navigation. It should take users to another page or section.
If you only want to trigger an action, you should use a <button>.
Bad example –
<a href="javascript:void(0);" onclick="openModal()">Open</a>
Better example –
<button onclick="openModal()">Open</button>
This improves structure and makes your code meaningful.
➤ It Creates Accessibility Issues
Screen readers treat links and buttons differently.
- Links navigate.
- Buttons perform actions.
When you misuse anchor tags, assistive technologies may confuse users. That affects accessibility and user experience.
Search engines also prefer proper semantic structure for SEO purposes.
➤ It Mixes JavaScript with HTML
Inline JavaScript makes your code harder to maintain.
Example:
<a href="javascript:void(0);" onclick="doSomething()">
Modern best practice separates structure and behavior.
Better approach:
<button id="actionBtn">Click Me</button>
document.getElementById("actionBtn").addEventListener("click", function() {
doSomething();
});
This method keeps your project clean and scalable.
➤ It Can Affect SEO Structure
Search engines crawl anchor tags to understand website structure.
If you use javascript:void(0); in many places, crawlers may not understand your internal linking system clearly.
This can reduce clarity in site architecture.
Read Also – location.reload(true)
Modern Alternatives to javascript:void(0) –
You can use better methods today.
➤ Use a Button for Actions
If you trigger an action, use a button element.
<button>Show Details</button>
Buttons work perfectly for JavaScript events.
➤ Use preventDefault() Properly
If you still use an anchor tag, you can prevent default behavior like this:
<a href="#" id="menuLink">Menu</a>
document.getElementById("menuLink").addEventListener("click", function(event) {
event.preventDefault();
toggleMenu();
});
This method gives you more control and cleaner code.
When Can You Still Use It?
You may still see javascript:void(0); in:
- Legacy websites
- Old CMS themes
- Quick prototypes
- Debugging scenarios
It does not break your website. It simply returns undefined.
However, modern development standards prefer semantic HTML and clean event handling.
Bottom Line –
javascript:void(0); looks complex, but it performs a simple task. It runs JavaScript and returns nothing.
Developers used it widely in older web development to prevent navigation inside anchor tags. Today, you have better and cleaner options.
If you build modern websites, use proper buttons for actions and separate JavaScript from HTML. This approach improves accessibility, SEO structure, and code quality.
When you understand small concepts like javascript:void(0);, you build stronger fundamentals in JavaScript and frontend development.
You Might Also Like – Hoisting in JavaScript
