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>

Morlee

The given code could not have triggered this error, since instead of an a element appearing as a descendant of a button element, you have a button element appearing as a descendant of an a element. Neither construct is valid HTML, however. – Biserrate

possible duplicate of Can I nest a <button> element inside an <a> using HTML5? – Chameleon

@Biserrate You are right, therefore I just edited the question. – Deem

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.

Europa

Either error is possible with validator.w3.org/nu (Button can't be inside anchor, anchor can't be inside button). At this moment I'm not sure how to get the effect I want, which is pretty button navigation on a mobile site, with a failover in case JavaScript is disabled ... I'm sure I'll get there sooner or later. – Sideslip