When (and when not to) use an anchor tag?

Avatar of Chris Coyier
Chris Coyier on

Interesting question from reader Don Wilson:

I’m curious to know your opinion. When should we use anchor tags and when should we use something else?

I have generally used the `a` tag liberally whenever I wanted something to be clickable. I looked up the definition and it appears that I am using the `a` tag where it is not meant to be used. I looked through the GMail source and they are using `div` elements for most of their clickable things.

I think that my usage has come from writing HTML from before Javascript was widely used for events. Anyways, I’m not sure now where I should draw the line for the `a` tag. What’s your opinion?

I think if you are going to put a href attribute on the anchor that actually does something even if JavaScript is disabled, then the anchor is the right choice. If the app is totally JavaScript dependent all behavior is attached via JavaScript, I guess it doesn’t really matter what element you use. Maybe it’s even better not to use an anchor since the behavior probably bears no resemblance to what anchor links do. You could probably talk me out of that though. The thing is, anchors give you (“for free”) lots of the visual functionality that you want with deep browser support. So…

If you chose not to use anchor links for clickable functional elements, then:

  • Use cursor: pointer; so users get the cursor that looks like you can click like they are used to.
  • Use the tabindex attribute on the element so keyboard users can tab to it.
  • Define :hover, :active, and :focus styles.

View Demo