有效使用没有href属性的<a>(锚标记)？

Question

我一直在使用Twitter Bootstrap构建一个网站,它的很多功能都依赖于包装内容<a>,即使它们只是要执行Javascript.我对href="#"Bootstrap的文档建议的策略有问题,所以我试图找到一个不同的解决方案.

但后来我尝试完全删除该href属性.我一直在使用<a class='bunch of classes' data-whatever='data'>,并让Javascript处理其余的事情.它有效.

然而有些东西告诉我,我不应该这样做.对？我的意思是,技术上<a>应该是某种东西的链接,但我不完全确定为什么这是一个问题.或者是吗？

Answer 1

所述<a>nchor元件仅仅是一个锚,或从一些内容.最初,HTML规范允许命名锚点(<a name="foo">)和链接锚点(<a href="#foo">).

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

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

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

单击按钮会导致操作发生.

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

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

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

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

该按钮的作用告诉该特定元素被视为一个按钮作为用于任何语义底层元件可能有一个覆盖该用户.

对于<span>和<div>元素,你可能要添加JavaScript键侦听器Space或Enter触发click事件.<a href>和<button>元素默认执行此操作,但非按钮元素不执行此操作.有时将click触发器绑定到不同的键更有意义.例如,可能会绑定Web应用程序中的"帮助"按钮F1.

Answer 2

我想你可以在这里找到答案:没有href属性的锚标签是否安全？

此外,如果您不想使用href进行链接操作,可以使用它:

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

Answer 3

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

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

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

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

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

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

资料来源:W3C HTML5推荐标准