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

Question

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

跨浏览器渲染

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

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

<button>在设计Web应用程序与页面本身交互时,当然还有提交表单时,可能会更好,但这一切都是什么？

[这个问题与SEO有关:<button> vs <a> HTML标签,但问题不一样]

Answer 1

感谢对我的问题的评论,这是我认为是真实的答案:

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

我必须使用<button>的行为,例如在当前页上:验证/复位形式,呈现出模式...

Answer 2

从这个优秀的辅助功能简介页面中讨论按钮与链接：

\n

\n

简单的规则集

\n

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

\n

按钮也是可聚焦的，并且可以通过空格键触发。按钮将触发打开或关闭某物等操作。或者发送表格。在大多数情况下，JavaScript 用于执行此操作。在 VoiceOver 的旋转器中，它将收集在“表单控件”窗口中。仅此一点就说明了一些事情。

\n

\n

他们还有很棒的嵌入式 YouTube 视频，展示了当人们混淆按钮和链接时屏幕阅读器是多么困惑

\n

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

\n

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

\n

更新：

\n

CSS Tricks\' When To Use The Button Element来自另一个答案，该答案已被删除，因为除了一个链接之外什么也没有。但这是一个很好的链接。

\n

为了避免仅仅因为链接而遭到投诉，这里有一些有用的片段：

\n

\n

\n
• 按钮是一个表单元素
\n
• \xe2\x80\x9c 如果按钮（链接）没有 \xe2\x80\x99t 有意义的 href，则 \xe2\x80\x99s 是<button>\xe2\x80\x9d
\n
• 如果您不喜欢那些无意义的 href\xe2\x80\x99s，a<button>似乎是一个不错的选择。但不幸的是，在 a 的上下文之外<form>， a<button>同样毫无意义。
\n
• 即使 a <button>\xe2\x80\x99 在没有 JavaScript 帮助的情况下不会在表单之外执行任何操作，但对于可以单击执行除更改页面之外的操作的操作仍然感觉更好。虚假的 href 链接绝对感觉不对\xe2\x80\x99。
\n
• 继续，呃，正确地制作可点击的东西。
\n

\n

\n