有效使用 <a>(锚标记)没有 href 属性? [英] Valid to use <a> (anchor tag) without href attribute?
问题描述
我一直在使用 Twitter Bootstrap 来构建一个站点，它的很多功能都依赖于将内容包装在 <a> 中，即使它们只是要执行 Javascript.我在使用 Bootstrap 文档推荐的 href="#" 策略时遇到了问题，所以我试图找到不同的解决方案.
但后来我尝试完全删除 href 属性.我一直在使用 <a class='bunch of classes' data-whatever='data'>，并让 Javascript 处理其余的.它有效.
但有些事情告诉我我不应该这样做.对?我的意思是，技术上 应该是指向某物的链接，但我不完全确定 为什么这是一个问题.或者是吗?
nchor 元素只是指向或来自某些内容的锚点.最初的 HTML 规范允许命名锚(<a name="foo">)和链接锚(<a href="#foo">).
命名锚格式不太常用，因为片段标识符现在用于指定[id]属性(尽管为了向后兼容，您仍然可以指定[name]代码>属性).一个<代码><a> 没有 [href] 属性的元素仍然有效.
就语义和样式而言， 元素不是链接 (:link)，除非它具有 [href] 属性.这样做的一个副作用是，没有 [href] 的 元素默认不会在 Tab 键顺序中.
真正的问题是 元素是否单独是 的适当表示.在语义层面上，link 和 button 之间有明显的区别.
按钮是点击时会导致操作发生的东西.
链接是导致当前文档中导航发生变化的按钮.在片段标识符 (#foo) 的情况下，发生的导航可能在文档内移动，或者在 url (/bar) 的情况下移动到新文档.
由于链接是一种特殊类型的按钮，它们的操作经常被覆盖以执行替代功能.从一致性的角度来看，继续使用锚点作为按钮是可以的，尽管在语义上不太准确.
按钮角色告诉用户特定元素正在将按钮视为底层元素可能具有的任何语义的覆盖.
对于 和
click事件.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屋！
