Why we should care about not using anchor tags for page interactions

January 19, 2012 Robbie Clutton

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.

About the Author

Robbie Clutton

Robbie Clutton is the Head of Pivotal Labs in EMEA.

College Sports Anytime, Anywhere with the NCAA iPhone App
College Sports Anytime, Anywhere with the NCAA iPhone App

Watching the latest NCAA sports reel from the comfort of your own couch is not always a reality. For all t...

Treehouse for Kids: "Are We There Yet" Insurance
Treehouse for Kids: "Are We There Yet" Insurance

For most of us over the age of 25 there was a certain learning curve associated with the adoption of the In...

SpringOne 2021

Register Now