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

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?

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); });

Actually, both methods are considered obsolete. Developers are instead encouraged to separate all JavaScript in an external JS file in order to separate logic and code from genuine markup

• http://www.alistapart.com/articles/behavioralseparation
• http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

The reason for this is that it creates code that is easier to maintain and debug, and it also promotes web standards and accessibility. Think of it like this: Looking at your example, what if you had hundreds of links like that on a page and needed to change out the alert behavior for some other function using external JS references, you'd only need to change a single event binding in one JS file as opposed to copying and pasting a bunch of code over and over again or doing a find-and-replace.

Couple of reasons:

1. Bad code practice:
   The HREF tag is to indicate that there is a hyperlink reference to another location. By using the same tag for a javascript function which is not actually taking the user anywhere is bad programming practice.

2. SEO problems:
   I think web crawlers use the HREF tag to crawl throughout the web site & link all the connected parts. By putting in javascript, we break this functionality.

3. Breaks accessibility:
   I think some screen readers will not be able to execute the javascript & might not know how to deal with the javascript while they expect a hyperlink. User will expect to see a link in the browser status bar on hover of the link while they will see a string like: "javascript:" which might confuse them etc.

4. You are still in 1990's:
   The mainstream advice is to have your javascript in a seperate file & not mingle with the HTML of the page as was done in 1990's.

HTH.

I open lots of links in new tabs - only to see javascript:void(). So you annoy me, as well as yourself (because Google will see the same thing).

Another reason (also mentioned by others) is that different languages should be separated into different documents. Why? Well,

• Mixed languages aren't well supported by most IDEs and validators. Embedding CSS and JS into HTML pages (or anything else for that matter) pretty much destroys opportunities to have the embedded language checked for correctness statically. Sometimes, the embedding language as well. (A PHP or ASP document isn't valid HTML.) You don't want syntax errors or inconsistencies to show up only at runtime.
• Another reason is to have a cleaner separation between the kinds of things you need to specify: HTML for content, CSS for layout, JS usually for more layout and look-and-feel. These don't map one to one: you usually want to apply layout to whole categories of content elements (hence CSS) and look and feel as well (hence jQuery). They may be changed at different times that the content elements are changed (in fact the content is often generated on the fly) and by different people. So it makes sense to keep them in separate documents as well.