I was pairing with Adam today when we had a chance to write a little Javascript. This was an interaction that changed state in the DOM without changing the page location, and we initially used an anchor element. I remembered a spectacular rant by Dan Webb about why anchors shouldn’t be used in this way. I couldn’t quite find the tweets I was looking for, so I asked.

[View the conversation between Dan Webb and myself here on Storify]

Essentially the gist is “if you don’t have a URI, then don’t use the anchor tag”. That means not using markup like

  <a href="#">click</a>

I can hear Matt Andrews telling me to put a javascript void call in the href, and although I understand the point that it won’t do anything if Javascript isn’t enabled on the page whereas using ‘#’ would, and that it states its intentions through calling Javascript directly, I now think we can do a little better. So we shouldn’t do this either:

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

I did the first pass of a refactor and started to use a span element before Berger pointed out that that was probably just as non-semantic as the anchor element. I had to concede the point.

For our case, the best option was an input element with type button. That summed up the best interaction for our use case; manipulating the DOM on a user action, without referencing another resource or an anchored point within the current document.

The thing is, it’s a small change and there are so many examples on the web where the href=# pattern is used. It does work, so why bother changing it? Well yes, while it might work, this isn’t the purpose of an anchor tag. There are other elements that will work just as well for you and make semantic sense. If we do that, then we can all make Dan a little happier.