2021年HTML官方规范是否允许在`<button>`内嵌套带href的`<a>`标签？

结论 #

2021年生效的HTML官方规范明确规定：不允许在<button>元素内嵌套带有href属性的可交互<a>标签，你给出的嵌套写法属于不符合规范的非法用法。

规则说明 #

• <button>的内容模型仅允许包含无交互属性的短语内容，带href属性的<a>本身属于交互式可点击元素，嵌套两个交互元素会导致浏览器行为冲突（点击时无法判定触发按钮事件还是链接跳转），同时会造成辅助阅读设备识别异常，严重影响页面可访问性。
• 只有不带href属性的<a>才属于纯短语内容，符合<button>的内容嵌套要求，这一规则从HTML5发布到2021年没有发生变动。

符合规范的跳转按钮实现方案 #

要实现点击跳转的按钮效果，除了你提到的JS点击事件方案外，还有两种合规的原生实现方式：

1. 用<a>标签包裹<button>元素：是目前最常用的轻量实现，不需要额外逻辑即可生效

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

2. 用form表单嵌套按钮：适合本身存在表单提交需求的场景，就是你给出的示例写法

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

权威规范参考来源 #

你可以查阅以下官方权威资料确认相关规则：

• WHATWG HTML 现行活跃标准中关于<button>元素内容模型的章节
• W3C HTML 5.2 正式推荐标准中交互式内容嵌套限制的相关规则
• MDN Web Docs 官方HTML参考中<button>元素的说明文档

内容的提问来源于stack exchange，提问作者anatolhiman