有效使用< a> （锚标记）没有href属性？ [英] Valid to use <a> (anchor tag) without href attribute?

问题描述

我一直在使用Twitter Bootstrap来构建一个网站，它的许多功能依赖于包装< a> 中的内容，即使它们只是去执行Javascript。我对Bootstrap的文档建议的 href =＃策略存在问题，所以我试图寻找不同的解决方案。

但是我试着完全删除 href 属性。我一直在使用< a class ='一堆类'data-whatever ='data'> ，并用Javascript来处理其余部分。它的工作。

然而有些事情告诉我，我不应该这样做。对？我的意思是，从技术上讲，< a> 应该是某种东西的链接，但我不完全确定这是一个问题。或者是它？

解决方案

< a> nchor元素是只是一些内容的锚点。最初，HTML规范允许使用命名锚（< a name =foo> ）和链接锚（< a href =＃ foo> ）。

命名锚点格式不太常用，因为片段标识符现在用于指定 [id] 属性（尽管为了向后兼容，您仍然可以指定 [name] attributes）。 一个< a> ;没有 [href] 属性的元素仍然有效。

就语义和样式而言，< a> 元素不是链接（：link ），除非它具有 [href] 属性。这样做的副作用是没有 [href] 的< a> 元素将不在

真正的问题是单独使用< a> 元素是否是适当的表示形式一个<按钮> 。在语义层面上，链接和一个按钮之间有明显区别。

按钮是点击时引起动作发生的按钮。

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

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

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



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

按钮角色告诉用户该特定元素被视为一个按钮，作为对基础元素可能具有的任何语义的覆盖。

对于< span> 和< div> 元素，您可能希望添加JavaScript关键字侦听器空间或输入触发点击事件。 < a href> 和<按钮> 元素默认会这样做，但非按钮元素不会。有时将 click 触发器绑定到不同的键更有意义。例如，Web应用程序中的帮助按钮可能会绑定到 F1 。

I've been using Twitter Bootstrap to build a site, and a lot of its functionality depends on wrapping things in <a>, even if they're just going to execute Javascript. I've had problems with the href="#" tactic that Bootstrap's documentation recommends, so I was trying to find a different solution.

But then I tried just removing the href attribute altogether. I've been using <a class='bunch of classes' data-whatever='data'>, and having Javascript handle the rest. And it works.

Yet something's telling me I shouldn't be doing this. Right? I mean, technically <a> is supposed to be a link to something, but I'm not entirely sure why this is a problem. Or is it?

解决方案

The <a>nchor element is simply an anchor to or from some content. Originally the HTML specification allowed for named anchors (<a name="foo">) and linked anchors (<a href="#foo">).

The named anchor format is less commonly used, as the fragment identifier is now used to specify an [id] attribute (although for backwards compatibility you can still specify [name] attributes). An <a> element without an [href] attribute is still valid.

As far as semantics and styling is concerned, the <a> element isn't a link (:link) unless it has an [href] attribute. A side-effect of this is that an <a> element without [href] won't be in the tabbing order by default.

The real question is whether the <a> element alone is an appropriate representation of a <button>. On a semantic level, there is a distinct difference between a link and a button.

A button is something that when clicked causes an action to occur.

A link is a button that causes a change in navigation in the current document. The navigation that occurs could be moving within the document in the case of fragment identifiers (#foo) or moving to a new document in the case of urls (/bar).

As links are a special type of button, they have often had their actions overridden to perform alternative functions. Continuing to use an anchor as a button is ok from a consistency standpoint, although it's not quite accurate semantically.

If you're concerned about the semantics and accessibility of using an <a> element (or <span>, or <div>) as a button, you should add the following attributes:

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

The button role tells the user that the particular element is being treated as a button as an override for whatever semantics the underlying element may have had.

For <span> and <div> elements, you may want to add JavaScript key listeners for Space or Enter to trigger the click event. <a href> and <button> elements do this by default, but non-button elements do not. Sometimes it makes more sense to bind the click trigger to a different key. For example, a "help" button in a web app might be bound to F1.

这篇关于有效使用< a> （锚标记）没有href属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！