在没有 href 属性的情况下使用 <a> （锚标记）有效吗？

Question

我一直在使用 Twitter Bootstrap 来构建一个站点，它的很多功能都依赖于将东西包装在 <a> 中，即使它们只是要执行 Javascript。我遇到了 Bootstrap 文档推荐的 href="#" 策略的问题，所以我试图找到一个不同的解决方案。

但后来我尝试完全删除 href 属性。我一直在使用 <a class='bunch of classes' data-whatever='data'> ，让 Javascript 处理其余的。它有效。

然而，有些事情告诉我，我不应该这样做。正确的？我的意思是，技术上 <a> 应该是指向某物的链接，但我不完全确定 为什么 这是个问题。或者是吗？

原文由 Zacqary 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

<a> nchor 元素只是指向或来自某些内容的锚点。最初 HTML 规范允许命名锚点（ <a name="foo"> ）和链接锚点（ <a href="#foo"> ）。

命名锚点格式不太常用，因为片段标识符现在用于指定 [id] 属性（尽管为了向后兼容，您仍然可以指定 [name] 属性）。 没有 [href] 属性的 <a> 元素仍然有效。

就语义和样式而言， <a> 元素不是链接（ :link ）除非它有 [href] 这样做的副作用是 <a> 没有 [href] --- 的元素默认情况下不会出现在 Tab 键顺序中。

真正的问题是 <a> 元素本身是否是 <button> 的适当表示。在语义层面上，a link 和 button 之间存在明显差异。

按钮是单击时会导致动作发生的东西。

链接是导致当前文档中导航发生变化的按钮。如果是片段标识符 ( #foo )，发生的导航可能是在文档内移动；如果是 url，则可能是移动到新文档 ( /bar )。

由于链接是一种特殊类型的按钮，因此它们的操作通常会被覆盖以执行替代功能。从一致性的角度来看，继续使用锚点作为按钮是可以的，尽管它在语义上不太准确。

如果您担心使用 <a> 元素（或 <span> 或 <div> 属性）的语义和可访问性，您应该添加以下按钮， :

 <a role="button" tabindex="0" ...>...</a>

按钮角色 告诉用户特定元素被视为按钮，作为对底层元素可能具有的任何语义的覆盖。

对于 <span> 和 <div> 元素，您可能需要为 Space 或 Enter 添加 JavaScript 键侦听器以触发 click 事件。 <a href> 和 <button> 元素默认执行此操作，但非按钮元素不执行此操作。有时将 click 触发器绑定到不同的键更有意义。例如，Web 应用程序中的“帮助”按钮可能会绑定到 F1 。

原文由 zzzzBov 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我想您可以在这里找到答案： 没有 href 属性的锚标记安全吗？

另外，如果你不想与 href 进行链接操作，你可以像这样使用它：

 <a href="javascript:void(0);">something</a>

原文由 swati 发布，翻译遵循 CC BY-SA 3.0 许可协议