HTML验证报错：button元素不得作为a元素后代，该如何解决？

你收到的报错是HTML规范的强制要求：

"the element (button) must not appear as a descendant of the (a) element"

<a>是跳转类交互元素，<button>是动作触发类交互元素，二者嵌套会导致点击事件冲突、屏幕阅读器等无障碍设备识别异常，因此规范明确禁止这种嵌套写法。

推荐两种合规的修改方式，可根据你的需求选择：

• 方案1（最推荐，语义匹配跳转场景）：移除<button>标签，直接给<a>标签加样式模拟按钮外观
  你本身的需求是点击跳转到contact.html，语义上用<a>元素更准确，只需要修改原嵌套行的代码：
  修改前代码：

  <a class="cta" href="contact.html"><button>Contact</button></a>
  

  修改后代码：

  <a class="cta" href="contact.html">Contact</a>
  

  后续你只需给.cta选择器添加按钮样式（如内边距、背景色、边框、圆角、鼠标悬浮效果等），就能实现和之前完全一致的视觉效果。

• 方案2（适合需要按钮原生交互逻辑的场景）：移除<a>标签，给<button>添加跳转逻辑
  如果你需要保留<button>的原生交互特性（比如表单联动、默认按钮样式复用），可以用JS实现跳转：

  <button class="cta" onclick="window.location.href='contact.html'" role="link" aria-label="跳转到联系页面">Contact</button>
  

  其中role="link"和aria-label是无障碍优化属性，用于告诉辅助设备该按钮的实际作用是跳转链接。

<body>
<header>
    <nav>
        <ul class="nav_links">
            <li><a href="index.html">Home</a></li>
            <li><a href="history.html">History</a></li>
            <li><a href="visit.html">Visit</a></li>
        </ul>
    </nav>
    <a class="cta" href="contact.html">Contact</a>
    </header>
    </body>

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