HTML validation - Incorrect wrap of button

[oricis]

From the demo page: https://newcss.net/usage/elements/

The instructions for a link button:

Click me!

A "button" can't be wrapped in an anchor element.
This use doesn't pass HTML validators.

[bhenbe]

One way to avoid this problem would be to favor the use of strong instead of button.

Like this:

<a href="https://example.com">
  <strong>Click me!</strong>
</a>

The fact is that a link to which we assign a button visual is often the case in order to emphasize its importance in a page. The strong tag responds in this sense better than the button tag. In terms of design, this is justified.

[simevidas]

For the record, the code example on the website is

<a href="https://example.com">
  <button>Click me!</button>
</a>

The HTML Standard states this for the content model of <a>:

Transparent, but there must be no interactive content descendant, <a> element descendant, or descendant with the tabindex attribute specified.

https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element

<button> is interactive and therefore not allowed.

[remino]

Old issue, I know, but this always irritated me as well. I guess the proper way to do a “link button” would be to simply wrap the button in a <form>:

<form action="https://example.com" method="get">
  <button type="submit">Go to Example</button>
</form>

It’s not that much more verbose than having a <a> wrap a <button>, but note <form> is display: block by default while <a> is display: span.