有效使用<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>
的合适表示。 在语义层面上, link
和button
之间有明显的区别。
一个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>
元素,您可能希望为Space或Enter添加JavaScript键侦听器来触发click
事件。 <a href>
和<button>
元素默认是这样做的,但非button元素不这样做。 有时将click
触发器绑定到不同的键上更有意义。 例如,Web应用程序中的“帮助”button可能会绑定到F1 。
我认为你可以在这里find你的答案: 一个没有href属性的锚标签是否安全?
另外如果你想不用href链接操作,你可以像这样使用它:
<a href="javascript:void(0);">something</a>
是的,使用没有href
属性的锚标签是有效的 。
如果
a
元素没有href
属性,那么元素表示一个占位符,表示一个链接可能被放置的位置,如果它是相关的,则只包含元素的内容。
是的,你可以使用class
和其他属性, 但你不能使用target
, download
, rel
, hreflang
和type
。
如果href属性不存在,则必须省略
target
,download
,rel
,hreflang
和type
属性。
至于“ 我应该吗? ”部分,请参阅第一个引用:“ 如果链接是相关的,则链接可能被放置 ”。 所以我会问:“ 如果我没有JavaScript,我会用这个标签作为链接吗? ” 如果答案是肯定的,那么是的,你应该使用<a>
没有href
。 如果不是,那么我仍然会使用它,因为生产力对于我来说比边缘案例语义更重要,但这只是我个人的看法。
此外,你应该注意不同的行为和样式 (例如没有下划线,没有指针光标,而不是:link
)。
来源: W3C HTML5推荐
这是有效的。 例如,您可以使用它来显示模式(或响应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"
会使指针变成动作types。 没有href
或role="button"
,游标指针不会改变。