有效使用<a>（锚标签）没有href属性？

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

但后来我试图完全删除href属性。我一直在使用<a class='bunch of classes' data-whatever='data'>，并用Javascript来处理其余部分。它的工作原理。

然而事情告诉我，我不应该这样做。对？我的意思是，在技术上<a>应该是一个链接的东西，但我不完全确定为什么这是一个问题。或者是？

来源

2012-05-09 Zacqary

156

的<a> nchor元素是一个简单的锚去往或来自某些内容。最初的HTML规范允许使用命名锚（<a name="foo">）和链接锚（<a href="#foo">）。

由于片段标识符现在用于指定[id]属性（尽管为了向后兼容，您仍然可以指定[name]属性），因此不太常用已命名的锚定格式。 An <a> element without an [href] attribute is still valid。

就语义和造型而言，<a>元素不是链接（:link），除非它具有[href]属性。这样做的一个副作用是默认情况下没有[href]的元素将不处于标签顺序。

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

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

链接是导致当前文档中导航更改的按钮。发生的导航可能在片段标识符（#foo）的情况下在文档中移动，或者在网址（/bar）的情况下移动到新文档。

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

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

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

的button role告知用户该特定元素被视为一个按钮，作为覆盖元素可能具有的任何语义的覆盖。

对于<span>和<div>元素，你可能需要添加JavaScript的关键监听器空间或输入触发click事件。 <a href>和<button>元素默认会这样做，但非按钮元素不会。有时将click触发器绑定到不同的密钥更有意义。例如，Web应用中的“帮助”按钮可能会绑定到F1。

来源

2012-05-09 05:34:30 zzzzBov

'href =“＃”'我听说过。 'javascript：void（0）'我听说过。这个我从来没有听说过，但它似乎最有意义。这是标准的，适用于大多数浏览器，对吧？ – Zacqary

@Zacqary，'[role =“button”]'没有做任何具体的事情，你仍然需要听点击事件（但是你会这样做来制作一个JS按钮）。它旨在用于辅助导航（又名屏幕阅读器），以便屏幕阅读器知道将元素表示为按钮而不是其原始语义值。添加'[tabindex]'将元素添加到标签顺序。在特殊情况下，您可能实际上不希望/需要按Tab键顺序导航的按钮，所以它是一个可选属性。已经是按钮的元素不需要'[role =“button”]'，因为它是多余的。 – zzzzBov

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

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

此外，如果你想与HREF没有链接操作，您可以使用它像：

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

来源

2012-05-09 05:22:42 swati

实际上应该是'javascript：undefined' – rybo111

@ rybo111你是对的，但我仍然更喜欢void（0）;基本上因为它看起来更好。我不喜欢我的客户将事情看作“未定义”;-) – Alex

'text'？ – diynevala

是的，这是有效的使用锚标记没有href属性。

如果a元素没有href属性，那么元素代表占位符里的某个链接，否则可能已被放置，如果过相关的，包括刚刚元素的内容。

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

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

至于“我应该？”部分，首先看到的引文：“其中一个链接，否则可能已被放置，如果它已经相关”。所以我会问“如果我没有JavaScript，我会用这个标签作为链接吗？”。如果答案是肯定的，那么是的，你应该使用<a>没有href。如果不是，那么我仍然会使用它，因为对于我来说生产力比边缘情况语义更重要，但这仅仅是我个人的看法。

另外，你应该注意针对不同behaviour和styling（例如无下划线，没有指针光标，而不是一个:link）。

来源：W3C HTML5 Recommendation

来源

2015-10-09 19:58:48

它是有效的。例如，您可以使用它来显示模式（或对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>

这里我用的字体真棒图标，这是作为一个a标签，而不是一个button更好，展现一个模式。此外，设置role="button"会使指针更改为操作类型。没有href或role="button"，游标指针不会改变。

来源

2016-07-20 10:19:03 vedant1811

有效使用<a>（锚标签）没有href属性？

回答

相关问题