2021 版 "Is `<a>` inside of a `<button>` (officially) allowed?" 题

Question

我不擅长查找和理解官方 w3c 规范，所以请耐心等待。

我只想知道我是否可以在 2021 年正式使用 HTML <button> 元素内的交互式（可点击 href=""）锚标记：

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

较早的文章指出只允许短语内容，而根据 MDN，<a> 只有在不包含交互式 [=37] 时才被认为是短语内容=] (href="")。本文包含此类信息：https://css-tricks.com/use-button-element/

MDN states同理，只允许无交互的文字内容。

其他人认为 wrapping the button 在锚标签中是可行的方法（2021 年 8 月 (!)）。

据我所知，唯一允许的选项是将按钮包装在一个表单中，如果我想让按钮将用户发送到另一个 URL（除非我想使用JS点击事件):

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

有关于此问题的权威来源的提示吗？

Answer 1

您不能在 button 中包含带有 href 的锚点，因为当前 spec 规定了以下内容模型：

Phrasing content, but there must be no interactive content descendant

其中 interactive content 包括 "<a>（如果存在 href 属性）"

您不能在锚点中包含 button，因为 spec 规定

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

其中 interactive content 包括 "<button>"

所以我可以确定的剩余选项是：

2021 version of the "Is `<a>` inside of a `<button>` (officially) allowed?" question