如何修复HTML验证器错误：a元素不允许作为button元素的后代元素

报错原因 #

这个W3C验证错误是因为HTML规范不允许交互式元素互相嵌套：<a>链接和<button>按钮都属于可点击的交互式元素，嵌套使用会导致浏览器行为歧义（点击时无法判断是要触发链接跳转还是按钮事件），属于规范明确禁止的写法。

方案1（推荐，无需JS）：去掉<button>标签，直接给<a>标签应用按钮样式 #

这个方案改动最小，完全保留原有功能和视觉效果：

1. 替换HTML中回到顶部的嵌套代码：

<!-- 替换掉原来的button嵌套a的代码 -->
<a href="#top" class="top_btn">Back to top of the page</a>

2. 调整对应CSS代码，删除原有的.footer .top_a样式规则，合并到.top_btn样式中：

.footer .top_btn{
  background : #1f1f1f;
  border : none;
  border-radius : 5px;
  width : 200px;
  height : 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color : #efefef;
  text-decoration: none;
  font-size:16px;
}

方案2（保留button标签可选方案）： #

如果确实需要保留<button>元素，就移除内部的<a>标签，用JS实现跳转逻辑：

1. HTML修改为：

<button class='top_btn' onclick="window.location.href='#top'">Back to top of the page</button>

2. 删除CSS中原来的.footer .top_a相关样式即可。

两种方案都可以通过W3C验证，且原有功能完全正常。

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