The element button must not appear as a descendant of the a element

Question

Please help, I am getting error via http://validator.w3.org/ while validating my html5 template. I get the message "The element button must not appear as a descendant of the a element.". I can't understand this. Could anyone help me to solve this?

Here is my code:

<div class="post-response btn-group btn-group-lg">
   <a href="#"><button type="button" class="btn btn-default"><i class="fa fa-comment"> 5  Comments</i></button></a>
   <a href="#"><button type="button" class="btn btn-default"><i class="fa fa-heart"> 5 Likes</i></button></a>
</div>

Answer 1

The usual error from the W3C validator is:

The element button must not appear as a descendant of the a element

This makes more sense for your question, as you have a button that is a descendant of an anchor.

Normally, you could solve the issue by simply styling your anchor tag, or by placing the button within a form element:

<form style="display: inline" action="http://www.example.com/" method="get">
  <button>Some Call to Action</button>
</form>

But in your case, I don't think you even need the anchors as you aren't linking anywhere using HTML (and if you are attaching events using JavaScript, you could simply attach those events to the button rather than the anchor.