Why is it bad practice to use links with the javascript: "protocol"?

javascript html href
zneak picture zneak · Mar 19, 2010 · Viewed 12.2k times · Source

In the 1990s, there was a fashion to put Javascript code directly into <a> href attributes, like this:

<a href="javascript:alert('Hello world!')">Press me!</a>

And then suddenly I stopped to see it. They were all replaced by things like:

<a href="#" onclick="alert('Hello world!')">Press me!</a>

For a link whose sole purpose is to trigger Javascript code, and has no real href target, why is it encouraged to use the onclick property instead of the href property?

Answer

Nick Craver picture Nick Craver · Mar 19, 2010

The execution context is different, to see this, try these links instead:

<a href="javascript:alert(this.tagName)">Press me!</a> <!-- result: undefined -->
<a href="#" onclick="alert(this.tagName)">Press me!</a> <!-- result: A -->

javascript: is executed in the global context, not as a method of the element, which is usually want you want. In most cases you're doing something with or in relation to the element you acted on, better to execute it in that context.

Also, it's just much cleaner, though I wouldn't use in-line script at all. Check out any framework for handling these things in a much cleaner way. Example in jQuery:

$('a').click(function() { alert(this.tagName); });

Related questions

Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

The following are two methods of building a link that has the sole purpose of running JavaScript code. Which is better, in terms of functionality, page load speed, validation purposes, etc.? or function myJsFunc() { alert("myJsFunc"); } <a href="javascript:…

Read More
Open URL in same window and in same tab

I want to open a link in the same window and in the same tab that contains the page with the link. When I try to open a link by using window.open, then it opens in new tab—not …

Read More
HTML tag <a> want to add both href and onclick working

I'd like to ask about HTML tag <a href="www.mysite.com" onClick="javascript.function();">Item</a> How to make this a tag working with href and onClick? (prefer onClick running first then href)

Read More