标签式导航应使用<a>锚元素还是<button>按钮元素？

核心判断依据：是否关联URL/hash变化 #

如果你的标签导航完全不需要修改URL（包括hash值），仅通过DOM操作切换内容，优先用<button>更合适，原因如下：

• 语义匹配度更高：<a>的原生语义是「导航到某个外部/内部资源」，哪怕是同页锚点也指向页面内特定片段；而你的场景是纯页面内操作，无资源跳转行为，<button>的「触发页面内操作」语义更贴合。
• 无障碍支持更省心：屏幕阅读器对<button>的识别是原生的，默认可通过Tab键聚焦，按回车或空格就能触发；如果用<a>却不加有效href，它会被识别成普通文本，得额外添加tabindex和role="button"才能获得按钮的交互能力，反而多了冗余代码。
• 避免默认行为坑：给<a>加href="#"的话，点击会默认跳转到页面顶部，还得手动写preventDefault()阻止；不加href的话，<a>又失去了原生可点击的交互特性，怎么操作都麻烦。

如果之后计划给标签加上hash路由（比如点击标签后URL变为#tab-content-1，刷新页面能回到对应标签），那用<a href="#tab-content-1">更合适——这时它符合「导航到页面内片段」的语义，还能利用浏览器的历史记录功能，用户体验更完整。

关于弊端 #

• 错用<a>（无有效href或用#占位）的明显弊端：语义混淆，无障碍体验差，还要额外处理默认行为，增加代码复杂度。
• 用<button>几乎没有硬弊端，唯一需要注意的是它的默认样式和<a>不同，但这属于可自定义的样式问题，不算功能上的弊端。

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