I'm not good at finding and understanding the official w3c specs, so bear over with me.

All I want to know is whether or not I can officially, in 2021, use an interactive (clickable with href="") anchor tag inside of a HTML <button> element:

<button>
  <a href="https://...">Click Here!</a>
</button>

Earlier articles state that only phrasing content is allowed, and <a> is according to MDN considered phrasing content only if it doesn't contain an interactive link (href=""). This article contains that type of information: https://css-tricks.com/use-button-element/

MDN states the same, that only phrasing content without interactivity allowed.

Others think wrapping the button in an anchor tag is the way to go (August 2021 (!)).

As far as I can understand, the only allowed option, is to wrap the button in a form, if I want to make the button send the user to another URL (unless I want to use a JS click event):

<form action="https://..." method="GET">
  <button>Click Here!</button>
</form>

Any tips on authoritative sources for this issue?

CodePudding user response：

Wrapping an anchor in a button

You cannot include an anchor with href in a button, because the current spec prescribes the following content model:

Phrasing content, but there must be no interactive content descendant

where interactive content includes "<a> (if the href attribute is present)"

Wrapping a button in an anchor

You cannot include a button in an anchor because the spec dictates that

[...] there must be no interactive content [...]

where interactive content includes "<button>"

So the remaining options that I can identify are:

• Style your button as an anchor, or your anchor as a button
• Use the button's click event handler
• Wrap the button in a form
• Do whatever you like and hope that the browsers you need to support are permissive enough to forgive your transgressions