有效使用<a>(锚标签)没有HREF属性?

我一直在使用Twitter Bootstrap来构build一个站点,它的许多function依赖于在<a>包装的东西,即使他们只是要执行Javascript。 我遇到了Bootstrap文档推荐的href="#"策略问题,所以我试图find一个不同的解决scheme。

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

但有些事情告诉我,我不应该这样做。 对? 我的意思是,从技术上讲, <a>应该是一个链接,但我不完全确定这是一个问题。 还是呢?

<a> nchor元素仅仅是一些内容的锚点。 最初的HTML规范允许使用命名锚( <a name="foo"> )和链接锚( <a href="#foo"> )。

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

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

真正的问题是单独的<a>元素是否是<button>的合适表示。 在语义层面上, linkbutton之间有明显的区别。

一个button是点击时会导致一个动作发生的事情。

链接是导致当前文档中的导航改变的button。 发生的导航可能在片段标识符( #foo )的情况下在文档中移动,或者在urls( /bar )的情况下移动到新文档。

由于链接是一种特殊types的button,因此他们通常会重写其操作以执行替代function。 从一致性的angular度来看,继续使用锚点作为button是可以的,尽pipe它在语义上不是很准确。

如果您担心使用<a>元素(或<span><div> )作为button的语义和可访问性,则应添加以下属性:

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

buttonangular色告诉用户特定的元素被视为一个button,作为覆盖元素可能具有的任何语义的覆盖。

对于<span><div>元素,您可能希望为SpaceEnter添加JavaScript键侦听器来触发click事件。 <a href><button>元素默认是这样做的,但非button元素不这样做。 有时将click触发器绑定到不同的键上更有意义。 例如,Web应用程序中的“帮助”button可能会绑定到F1

我认为你可以在这里find你的答案: 一个没有href属性的锚标签是否安全?

另外如果你想不用href链接操作,你可以像这样使用它:

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

是的,使用没有href属性的锚标签是有效的

如果a元素没有href属性,那么元素表示一个占位符,表示一个链接可能被放置的位置,如果它是相关的,则只包含元素的内容。

是的,你可以使用class和其他属性, 但你不能使用targetdownloadrelhreflangtype

如果href属性不存在,则必须省略targetdownloadrelhreflangtype属性。

至于“ 我应该吗? ”部分,请参阅第一个引用:“ 如果链接是相关的,则链接可能被放置 ”。 所以我会问:“ 如果我没有JavaScript,我会用这个标签作为链接吗? ” 如果答案是肯定的,那么是的,你应该使用<a>没有href 。 如果不是,那么我仍然会使用它,因为生产力对于我来说比边缘案例语义更重要,但这只是我个人的看法。

此外,你应该注意不同的行为和样式 (例如没有下划线,没有指针光标,而不是:link )。

来源: W3C HTML5推荐

这是有效的。 例如,您可以使用它来显示模式(或响应data-toggledata-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"会使指针变成动作types。 没有hrefrole="button" ,游标指针不会改变。