When is a link not a link?

Google has a web page for its Chrome browser. This page provides information about the browser, but its primary purpose—its call-to-action, if you will—is to encourage you to download the browser. Hence the nice big blue button-like link that says “Download Chrome.”

Tech bloggy publication thingy The Next Web posted some words pointing out that, for a while there, the link wasn’t working. At all. There was no way to download Chrome from the page created for the purpose of letting you download Chrome.

Download Chrome

The problem was that the link isn’t a real link. I mean, technically it’s an A element, and it does have an href attribute …but the value of that attribute isn’t a resource (like say, an installer for a web browser, or terms of service for downloading a browser). Instead it uses the JavaScript pseudo-protocol—meaning: not actually a protocol—to point to void(0).

<a class="button eula-download-button" data-g-event="cta" data-g-label="download-chrome" href="javascript:void(0)">Download Chrome</a>

So when there was a problem with the JavaScript, the link stopped working:

Uncaught TypeError: Cannot read property 'Installer' of undefined

HTML has a very fault-tolerant way of handling errors: if it sees an element or attribute it doesn’t understand, it just ignores it—it doesn’t break the page, it just moves on to then next element. Likewise with CSS. Unknown selectors, properties, or values are simply ignored. Not so with JavaScript. A syntax error stops execution of the script. That’s actually quite handy when you’re trying to debug your code, but no so handy when it’s out on the web.

Given the brittleness of JavaScript’s error-handling, it seems unwise to entrust the core functionality of your page/app/site/whatever to the most fragile part of the front-end stack …especially when that same functionality is provided by a native HTML element.

I don’t want to pick on Google in particular here—there are far too many other sites exhibiting the same kind of over-engineering:

<a href="javascript:void(0)">

<a href="#" onclick="...">

<span class="button" onclick="...">

<div class="link" onclick="...">

By all means add all the JavaScript whizzbangery to your site that you want. But please make sure you’re adding it on a solid base of working markup. Progressive enhancement is your friend. Just like any good friend, it will help you out when unexpected bad things happen.

Have you published a response to this? :