使用<a>标签替代<button>标签是否存在优势？对应最佳实践是什么？

• 旧浏览器兼容的历史遗留习惯：早年IE6/7版本对<button>标签的样式渲染存在大量bug，比如默认内边距无法正常重置、点击事件触发逻辑异常，大量开发者为了兼容旧环境形成了用<a>模拟按钮的开发习惯，很多老项目迭代时也延续了这一写法
• 样式统一成本更低：原生<button>在不同浏览器的默认样式差异远大于<a>标签，要重置为统一的自定义按钮外观，<a>需要写的兼容代码更少，尤其是实现带复杂背景、自定义图标、特殊行高的按钮时，调整成本更低
• 跳转场景开发更高效：如果按钮的核心作用是页面跳转，直接给<a>加btn类不需要额外编写点击跳转的JS逻辑，借助原生href属性就能实现功能，比如列表页的“查看详情”按钮本身就是跳转到详情页，用<a>实现更直接
• 早期UI库的示例引导：很多早期流行的前端UI库（比如早期版本的Bootstrap）的btn类同时兼容<a>和<button>标签，官方示例也会同时给出两种写法，很多开发者参考示例开发时没有区分场景，直接沿用了更顺手的<a>写法

没有绝对的最优写法，核心遵循「语义匹配功能」的原则即可

优先使用原生<button>的场景：所有触发页面内交互的功能，比如表单提交、删除待办项、展开折叠面板、触发弹窗等不需要跳转页面的操作

• 原生无障碍支持更完善：<button>默认支持键盘聚焦、回车/空格触发点击事件，不需要额外添加tabindex、键盘事件监听就能适配屏幕阅读器、纯键盘操作的用户，无障碍适配成本远低于<a>模拟的按钮
• 交互行为更符合预期：<button>没有默认跳转行为，不需要额外写JS阻止href="#"带来的页面跳动、地址栏变更问题，也不会被浏览器识别为链接，右键菜单不会出现“在新标签页打开”这类不符合按钮功能的选项
• 表单场景原生适配：<button>可以直接通过type属性指定submit/reset/button的行为，不需要额外编写逻辑就能和原生表单配合，开发更简单

唯一适合用<a>模拟按钮的场景：按钮的核心功能是页面跳转（包括跳转到锚点、触发文件下载），同时视觉上需要呈现为按钮样式的情况
这种场景下用<a>反而更合理：可以利用原生href属性的能力，支持用户右键新标签页打开、滚轮点击打开新标签页等原生链接的交互行为，符合用户的使用预期

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