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

Question

Please help, I am getting error via http://validator.w3.org/ while validating my html5 template. I get the message " The element a must not appear as a descendant of the button 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 Error Message have Answered Your doubt Already According to HTML5 Spec Documentation

you can nest any elements inside an <a> except the following:

<a>

audio> (if the controls attribute is present)

<button>

<details>

<embed>

<iframe>

<img> (if the usemap attribute is present)

<input> (if the type attribute is not in the hidden state)

<keygen>

<label>

<menu> (if the type attribute is in the toolbar state)

<object> (if the usemap attribute is present)

<select>

<textarea>

<video> (if the controls attribute is present)

So you need to use some css to design an Button (or there is many Methods) instead of adding Button inside a element.

Answer 2

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.