是否可以在没有 href 属性的情况下使用 <a>（锚标签）？

Question

我一直在使用 Twitter Bootstrap 来构建网站，它的许多功能都依赖于用 <a> 把东西包起来，即使它们只是要执行 Javascript。我曾经遇到过 Bootstrap 文档推荐的 href="#" 方法存在问题，因此我试图寻找一个不同的解决方案。

但后来我尝试直接删除 href 属性。我一直在使用 <a class='bunch of classes' data-whatever='data'>，然后由 Javascript 处理其余部分。而且它还有效。

但有些事情告诉我我不应该这么做。对吗？我的意思是，从技术上讲，<a> 应该是指向某个链接的，但我不完全确定这是什么问题。或者说，这真的有问题吗？

- Zacqary

Answer 1

<a>元素仅仅是到某个内容的锚点或从某个内容的锚点而已。最初HTML规范允许命名锚点(<a name="foo">)和链接锚点(<a href="#foo">)。

命名锚点的格式较少使用，因为现在片段标识符用于指定[id]属性（虽然出于向后兼容性考虑，您仍然可以指定[name]属性）。没有[href]属性的<a>元素仍然是有效的。

就语义和样式而言，只有带有[href]属性的<a>元素才是链接(:link)。这样做的一个副作用是，默认情况下不带[href]的<a>元素不会出现在制表顺序中。

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

按钮是当点击时会导致某个操作发生的东西。

链接是一个按钮，它会导致当前文档中的导航发生变化。所发生的导航可能是在片段标识符(#foo)的情况下在文档内部移动，或者在url(/bar)的情况下转到新的文档。

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

如果您关心使用<a>元素（或<span>、<div>）作为按钮的语义和可访问性问题，则应添加以下属性：

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

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

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

- zzzzBov

---

@Zacqary，“[role='button']”没有具体的作用，您仍然需要监听点击事件（但是为了创建一个JS按钮，您无论如何都要这样做）。它的意义在于辅助导航（即屏幕阅读器），使得屏幕阅读器知道将元素呈现为按钮而不是其原始语义值。添加“[tabindex]”将该元素添加到制表顺序中。在特殊情况下，您可能实际上不希望/不需要在制表顺序中导航按钮，因此这是一个可选属性。已经是按钮的元素不需要“[role='button']”，因为它是多余的。 - zzzzBov

在HTML中，没有href和name属性的锚点标签是否有效？在我们的应用程序中，有一些删除链接是禁用的（因此没有href属性），但仍然显示给用户。 - Joshua Muheim

@JoshuaMuheim，希望你不介意，但是我已经将你的问题作为一个独立的问题发布了（https://dev59.com/DHHYa4cB1Zd3GeqPM5TL#16302695）。 - zzzzBov

只是提醒一下，如果您使用它来创建 JavaScript 操作的 "按钮" ... 完全删除 href 属性还会导致 Chrome（和可能其他浏览器）停止在鼠标悬停时更改光标。显然，这很容易通过 CSS 添加回去 - 只是一个小小的提示。 - Mir

@Mir，如果你不打算使用[href]，那么你应该为按钮使用<span>。 - zzzzBov

解决方案 <a role="button" tabindex="0" ...>...</a> 稍微有些吸引人，不过你试过它是否跨平台兼容吗？例如这样的链接在 iPad 上是否可访问？ - Hrvoje Golcic

Answer 2

我认为你可以在这里找到答案：Is an anchor tag without the href attribute safe?

同时，如果你想使用href进行无链接操作，你可以这样使用：

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

- swati

---

实际上应该是javascript:undefined。 - rybo111

@rybo111 你说得没错，但我仍然更喜欢void(0);基本上是因为它看起来更好。我不希望我的客户看到"undefined"这样的东西;-) - Alex

<a href="javascript:;">text</a> 的翻译是什么？ - diynevala

javascript:; 用于在IE6中破坏诸如滚动效果和gif动画等内容。对于没有链接操作的情况，可以使用专用的HTML元素，如 button。同时，如果JS失败，像AJAX链接这样的东西可以使用它们的 href 进行回退操作。 - Ilya Streltsyn

Answer 3

是的，可以使用不带href属性的锚点标签。

如果a元素没有href属性，那么该元素表示一个占位符，用于放置链接（如果有关联），仅由元素的内容组成。

是的，您可以使用class和其他属性，但是不能使用target、download、rel、hreflang和type属性。

如果不存在href属性，则必须省略target、download、rel、hreflang和type属性。

至于“我应该吗?”这一部分，请参见第一条引文：“如果它有关联，该链接可能已经被放置在此处”。因此，我会问：“如果我没有JavaScript，我会将此标记用作链接吗？”。如果答案是肯定的，那么是的，您应该使用不带href的<a>。如果不是，那么我仍然会使用它，因为对我来说生产率比边缘情况的语义更重要，但这只是我的个人意见。

此外，您应该留意不同的行为和样式（例如没有下划线、没有指针光标、不是一个:link）。

来源：W3C HTML5建议

- Tamás Bolvári

---

这并不是关于“边缘情况语义”，而是关于可访问性，即确保残障人士能够使用和理解网站内容。 - neiya

Answer 4

这是有效的。例如，您可以使用它来显示模态框（或类似的响应于data-toggle和data-target属性的东西）。

就像这样:

<a role="button" data-toggle="modal" data-target=".bs-example-modal-sm" aria-hidden="true"><i class="fa fa-phone"></i></a>

这里我使用了font-awesome图标，最好将其作为标签而不是标签来展示模态框。同时，设置role="button"可以使指针变成操作类型。如果没有href或role="button"，光标指针不会改变。

- Vedant Agarwala

---

在这种情况下，你应该使用一个按钮。从语义和可访问性的角度来看，这更加合适。锚点应该将您带到某个地方，而不是执行操作。另外，你为什么要用aria-hidden隐藏整个锚点呢？也许可以隐藏图标，但屏幕阅读器用户不应该有受损的体验。 - isherwood

Answer 5

文本。替换 href="#name" .. 然后保存它的工作..

- Abdullah Al Mahmud