Html 在没有 href 属性的情况下使用 <a>（锚标记）是否有效？

Valid to use <a> (anchor tag) without href attribute?

提问by Zacqary

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.

我一直在使用 Twitter Bootstrap 来构建一个站点，它的很多功能都依赖于将内容包装在<a>. 我对href="#"Bootstrap 文档推荐的策略有问题，所以我试图找到一个不同的解决方案。

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

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

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 whythis is a problem. Or is it?

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

回答by zzzzBov

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">).

所述<a>nchor元件仅仅是一个锚，或从一些内容。最初的 HTML 规范允许命名锚点 ( <a name="foo">) 和链接锚点 ( <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.

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

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.

就语义和样式而言，<a>元素不是链接 ( :link)，除非它具有[href]属性。这样做的一个副作用是默认情况下，没有的<a>元素不会[href]按 T​​ab 键顺序排列。

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 linkand a button.

真正的问题是<a>单独的元素是否是 a 的适当表示<button>。在语义层面上， alink和 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).

链接是导致当前文档中导航发生变化的按钮。在片段标识符 ( #foo)的情况下，发生的导航可能在文档内移动，或者在 url ( /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>元素（或<span>、 或<div>）作为按钮的语义和可访问性，则应添加以下属性：

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

The button roletells 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 Spaceor Enterto trigger the clickevent. <a href>and <button>elements do this by default, but non-button elements do not. Sometimes it makes more sense to bind the clicktrigger to a different key. For example, a "help" button in a web app might be bound to F1.

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

回答by swati

I think you can find your answer here : Is an anchor tag without the href attribute safe?

我想您可以在这里找到答案：没有 href 属性的锚标记安全吗？

Also if you want to no link operation with href , you can use it like :

此外，如果您不想使用 href 进行链接操作，您可以像这样使用它：

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

回答by Tamás Bolvári

Yes, it is validto use the anchor tag without a hrefattribute.

是的，使用没有href属性的锚标记是有效的。

If the aelement has no hrefattribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant, consisting of just the element's contents.

如果该a元素没有href属性，则该元素表示一个占位符，用于在其他情况下放置链接的位置（如果它是相关的），则仅由元素的内容组成。

Yes, you can use classand other attributes, but you can not use target, download, rel, hreflang, and type.

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

The target, download, rel, hreflang, and typeattributes must be omitted if the href attribute is not present.

的target，download，rel，hreflang，和type属性必须如果href属性不存在省略。

As for the "Should I?" part, see the first citation: "where a link might otherwise have been placed if it had been relevant". So I would ask "If I had no JavaScript, would I use this tag as a link?". If the answer is yes, then yes, you shoulduse <a>without href. If no, then I would still use it, because productivity is more important for me than edge case semantics, but this is just my personal opinion.

至于“我应该吗？”部分，请参阅第一个引文：“如果链接是相关的，则可能会放在其他地方”。所以我会问“如果我没有 JavaScript，我会使用这个标签作为链接吗？”。如果答案是肯定的，那么是的，您应该使用<a>without href。如果不是，那么我仍然会使用它，因为对我来说生产力比边缘情况语义更重要，但这只是我的个人意见。

Additionally, you should watch outfor different behaviourand styling(e.g. no underline, no pointer cursor, not a :link).

此外，您应该注意不同的行为和样式（例如，没有下划线、没有指针光标，而不是 a :link）。

Source: W3C HTML5 Recommendation

来源：W3C HTML5 推荐

回答by vedant

It is valid. You can, for example, use it to show modals (or similar things that respond to data-toggleand data-targetattributes).

这是有效的。例如，您可以使用它来显示模态（或响应data-toggle和data-target属性的类似事物）。

Something like:

就像是：

<a role="button" data-toggle="modal" data-target=".bs-example-modal-sm" aria-hidden="true"><i class="fa fa-phone"></i></a>

Here I use the font-awesome icon, which is better as a atag rather than a button, to show a modal. Also, setting role="button"makes the pointer change to an action type. Without either hrefor role="button", the cursor pointer does not change.

在这里，我使用了 font-awesome 图标，它更适合作为a标签而不是button，来显示模态。此外，设置role="button"使指针更改为操作类型。没有href或role="button"，光标指针不会改变。