title: Anchor tag as button without href
body: <p>I find unless on a form, <code>&lt;a&gt;</code> anchor tags are almost always used as buttons.</p>
  
  <p>My question is not why the <code>&lt;a&gt;</code> tag is used, but rather why <code>href="#"</code> is used also.</p>
  
  <p>To my understanding, <code>&lt;a&gt;</code> without an href is valid html and, in fact, offers more differentiation between a "button" anchor and link anchor tag, as <code>:link</code> and <code>:visited</code> are only triggered if there is an href. Even the cursor can be changed back to a pointer, and the text being highlight problem by changing the <code>::selection</code>. (<a href="http://jsfiddle.net/gX7MJ/2/" rel="nofollow">example</a>)</p>
  
  <p>While both are effected by <code>:active</code> (although even that can be differentiated by saying <code>a:visited:active, a:link:active {---}</code> for links), the only reason I can think of not to do this is the tabbing order is also removed.</p>
  
  <p>However, on the plus side, you get to remove <code>href="#"</code> (which can be useful when testing a page, javascript is disabled, etc), give a different default style to a 'button', and is easier to differentiate in code. Also, you could always assign it <code>tabindex="0"</code> to put it back into the tab flow, and in the future css may introduce <a href="http://www.w3.org/TR/css3-ui/#nav-index0" rel="nofollow">nav-index</a>, which is already introduced in Opera (although this is a property at risk).</p>
  
  <p>While removing tab order can be a hassle, I consider it as such: your simply replacing <code>href="#"</code> for <code>tabindex="0"</code>, which still differentiates between a "button" and a link, allowing you to also style them.</p>
  
  <p>So I guess my original question of why <code>href="#"</code> is used is still my main focus, but would like to hear if I missed any points of interest in why should/shouldn't be done to potentially be a better way to separate links from "buttons".</p>