在HTML中，何时应该使用按钮(<button>)或链接(<a>)？

Question

我正在阅读有关按钮标签的Bootstrap文档(http://getbootstrap.com/css/#buttons-tags)，<button>和<a>标签具有完全相同的外观，我发现了这个：

跨浏览器渲染

作为最佳实践，我们强烈建议尽可能使用元素，以确保匹配跨浏览器的呈现。

什么原因可以促使我使用没有href属性的<button>标签而不是<a>进行导航？

也许在设计与页面本身交互的Web应用程序时，<button>更好用，当然还用于提交表单，但是这就是全部吗？

[这个问题与SEO: <button> vs <a> HTML tags有关，但问题并不相同]

- Mickaël

---

我使用Bootstrap，并且仅使用<a>标签，也是由于SEO的原因。对于button，您需要调用JavaScript onclick。 - malta

当你不需要进行导航，例如加载模态框或提交表单时，请使用 <button>。始终使用 <a> 进行导航。 - Kyle Needham

Answer 1

感谢对我的问题的评论，这是我认为正确的答案：

我必须使用<a>标签来在页面/视图之间进行链接和导航。

我必须使用<button>标签来处理操作，例如在当前页面：验证/重置表单，显示模态框等。

- Mickaël

Answer 2

从这篇介绍无障碍性的优秀页面中谈论“按钮与链接”：Button vs Link。

简单规则如下： 链接可以聚焦并通过回车键触发，链接将重定向到新页面或同一页面的某个部分。在VoiceOver的旋转器中，它也将被收集在“链接”窗口中。 按钮也可以聚焦，并可以通过空格键触发。按钮将触发打开或关闭某些内容的操作，或者发送表单。在大多数情况下，JavaScript用于执行此操作。在VoiceOver的旋转器中，它将收集在“表单控件”窗口中。仅仅这就说明了一些问题。

他们还有一个很棒的嵌入式YouTube视频，展示了混淆按钮和链接时屏幕阅读器使用的困惑。

我在这两个之间遇到的边界问题是生成在单独选项卡中打开的PDF。它是一个按钮，因为你生成了某些东西，但你生成了一个下载，我希望自动链接到单独的选项卡中，以便生成PDF的Web应用程序保留在其自己的选项卡中。

我的决定是使用图标图像链接。

更新： CSS Tricks的何时使用按钮元素。这是另一个被删除的答案，因为只有一个链接。但是它是一个很好的链接。

为了避免对单个链接的抱怨，这里列出一些有用的片段：

- 按钮是表单元素。 - “如果按钮（链接）没有有意义的href属性，则应该使用<button>”。 - 如果您不喜欢那些毫无意义的href属性，则<button>似乎是一个不错的选择。但不幸的是，在没有<form>上下文的情况下，<button>同样毫无意义。 - 即使<button>在没有JavaScript帮助下在表单之外什么都不做，它仍然适合点击可执行除更改页面之外的其他操作的内容。虚假的href链接绝对不感觉正确。 - 请前进并正确地创建可点击的东西。

- icc97