什么时候应该在 HTML 中使用按钮 (<button>) 或链接 (<a>)？答案

【问题标题】：When should I use a button (<button>) or a link (<a>) in HTML?什么时候应该在 HTML 中使用按钮 (<button>) 或链接 (<a>)？
【发布时间】：2014-02-11 23:09:53
【问题描述】：

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

跨浏览器渲染

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

是什么原因导致我使用 <button> 标签（没有 href 属性）而不是 <a> 进行导航？

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

[此问题与SEO: <button> vs <a> HTML tags有关，但问题不一样]

【问题讨论】：

我使用 bootstrap 并且只使用 <a> 标签也是由于 SEO。使用button，您需要调用javascript `onclick。
当您不需要导航时（例如加载模式或提交表单）使用<button>，请始终使用<a> 进行导航。

标签： html

【解决方案1】：

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

我必须将<a> 用于页面/视图之间的链接和导航。

我必须将<button> 用于动作，例如在当前页面上：验证/重置表单，显示模式...

【讨论】：

【解决方案2】：

从这个出色的无障碍介绍页面中谈论Button vs Link：

简单的规则集

链接是可聚焦的，可以通过回车键触发。链接会将您重定向到新页面或同一页面中的部分。在 VoiceOver 的旋转器中，它也会被收集在“链接”窗口中。

按钮也是可聚焦的，并且可以通过空格键触发。一个按钮会触发一个动作，比如打开或关闭某物。或发送表格。在大多数情况下，JavaScript 用于执行此操作。在 VoiceOver 的旋转器中，它将被收集在“表单控件”窗口中。仅此而已。

他们还有很棒的嵌入式 youtube 视频，显示 how confusing it is for screen-readers when people mix up buttons and links

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

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

【讨论】：