我一直在使用Twitter Bootstrap来构建一个网站,它的许多功能都依赖于在<a>中包装东西,即使它们只是要执行Javascript。我在Bootstrap的文档推荐的href="#"策略上遇到了问题,所以我试图找到一个不同的解决方案。
但后来我尝试完全删除href属性。我一直在使用<a class='bunch of classes' data-whatever='data'>,并有Javascript处理其余部分。这很有效。
但我总觉得我不该这么做。对吧?我的意思是,技术上<a>应该是一个链接到某个东西,但我不完全确定为什么这是一个问题。真的是这样吗?
<a>nchor元素只是一个指向或来自某些内容的锚。最初HTML规范允许命名锚(<a name="foo">)和链接锚(<a href="#foo">)。
命名锚格式不太常用,因为片段标识符现在用于指定[id]属性(尽管为了向后兼容,您仍然可以指定[name]属性)。没有[href]属性的<a>元素仍然有效。
就语义和样式而言,<a>元素不是链接(:link),除非它有一个[href]属性。这样做的一个副作用是,没有[href]的< A >元素默认情况下不会出现在选项卡顺序中。
真正的问题是<a>元素是否是<按钮>的合适表示。在语义层面上,链接和按钮之间有明显的区别。
按钮是当点击时导致动作发生的东西。
链接是导致当前文档中的导航发生变化的按钮。在使用片段标识符(#foo)的情况下,发生的导航可以在文档中移动,在使用url的情况下,导航可以移动到新文档(/bar)。
由于链接是一种特殊类型的按钮,它们的操作经常被重写以执行替代功能。从一致性的角度来看,继续使用锚作为按钮是可以的,尽管它在语义上不太准确。
如果您关心使用<a>元素(或<span>,或<div>)作为按钮的语义和可访问性,您应该添加以下属性:
<a role="button" tabindex="0" ...>...</a>
按钮角色告诉用户,特定元素被视为按钮,覆盖了底层元素可能具有的任何语义。
对于<span>和<div>元素,您可能需要为Space或Enter添加JavaScript键侦听器以触发单击事件。<a href>和<button>元素默认这样做,但非button元素不这样做。有时,将单击触发器绑定到不同的键更有意义。例如,web应用程序中的“帮助”按钮可能绑定到F1。
是的,使用没有href属性的锚标记是有效的。
如果a元素没有href属性,则该元素表示a
占位符,用于链接可能被放置的位置
都是相关的,只包含元素的内容。
是的,您可以使用class和其他属性,但不能使用target、download、rel、hreflang和type。
target、download、rel、hreflang和type属性必须为
如果href属性不存在则省略。
至于“我应该吗?”部分,请参阅第一个引用:“如果相关,链接可能会被放置在哪里”。所以我会问“如果我没有JavaScript,我会使用这个标签作为链接吗?”如果答案是yes,那么yes,你应该使用<a>不带href。如果没有,那么我仍然会使用它,因为对我来说,效率比边缘情况语义更重要,但这只是我个人的观点。
此外,你应该注意不同的行为和样式(例如没有下划线,没有指针游标,没有:链接)。
来源:W3C HTML5推荐标准
<a>nchor元素只是一个指向或来自某些内容的锚。最初HTML规范允许命名锚(<a name="foo">)和链接锚(<a href="#foo">)。
命名锚格式不太常用,因为片段标识符现在用于指定[id]属性(尽管为了向后兼容,您仍然可以指定[name]属性)。没有[href]属性的<a>元素仍然有效。
就语义和样式而言,<a>元素不是链接(:link),除非它有一个[href]属性。这样做的一个副作用是,没有[href]的< A >元素默认情况下不会出现在选项卡顺序中。
真正的问题是<a>元素是否是<按钮>的合适表示。在语义层面上,链接和按钮之间有明显的区别。
按钮是当点击时导致动作发生的东西。
链接是导致当前文档中的导航发生变化的按钮。在使用片段标识符(#foo)的情况下,发生的导航可以在文档中移动,在使用url的情况下,导航可以移动到新文档(/bar)。
由于链接是一种特殊类型的按钮,它们的操作经常被重写以执行替代功能。从一致性的角度来看,继续使用锚作为按钮是可以的,尽管它在语义上不太准确。
如果您关心使用<a>元素(或<span>,或<div>)作为按钮的语义和可访问性,您应该添加以下属性:
<a role="button" tabindex="0" ...>...</a>
按钮角色告诉用户,特定元素被视为按钮,覆盖了底层元素可能具有的任何语义。
对于<span>和<div>元素,您可能需要为Space或Enter添加JavaScript键侦听器以触发单击事件。<a href>和<button>元素默认这样做,但非button元素不这样做。有时,将单击触发器绑定到不同的键更有意义。例如,web应用程序中的“帮助”按钮可能绑定到F1。