title: Should all of my clickable content be wrapped in either <a> or <button> tags?
body: <p>I want more clarification on this: I have a website that uses a ton of JavaScript buttons styled with CSS like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>nav ul { font-size:150%; text-align:center; margin:0; padding:0 }
  nav li {
    width:150px; height:150px; list-style:none; float:left; margin:5px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none;
    user-select:none
  }
  nav li:hover { background:#022; color:#eee; cursor:pointer; } 
  nav li:active { background:#066; color:#fff }
  nav span {
    display:block; position:relative; top:50%;
    -webkit-transform:translateY(-50%); transform:translateY(-50%)
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;span&gt;one&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;&lt;span&gt;two&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;&lt;span&gt;three&lt;/span&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is it better semantically, functionally, etc. to use anchor tags instead like this, and why?:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>nav ul { font-size:150%; text-align:center; margin:0; padding:0 }
  nav li {
    width:150px; height:150px; list-style:none; float:left; margin:5px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none;
    user-select:none
  }
  nav li:hover { background:#022; color:#eee; } 
  nav li:active { background:#066; color:#fff }
  nav span {
    display:block; position:relative; top:50%;
    -webkit-transform:translateY(-50%); transform:translateY(-50%)
  }
  nav a{ text-decoration:none; color:#222 }/* anchor styling added */</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav&gt;
    &lt;ul&gt;
      &lt;a href="#"&gt;&lt;li&gt;&lt;span&gt;one&lt;/span&gt;&lt;/li&gt;&lt;/a&gt;&lt;!-- anchor tags added --&gt;
      &lt;a href="#"&gt;&lt;li&gt;&lt;span&gt;two&lt;/span&gt;&lt;/li&gt;&lt;/a&gt;
      &lt;a href="#"&gt;&lt;li&gt;&lt;span&gt;three&lt;/span&gt;&lt;/li&gt;&lt;/a&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>what about using the <code>button</code> element instead of the other ways? Is there any difference?</p>