为什么嵌套锚标签是非法的?

I learned that nesting anchor tags is not standards compliant HTML.

我了解到嵌套锚定标签不是符合标准的HTML。

From W3:

W3:

Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.

元素定义的链接和锚点不能嵌套;元素不能包含其他元素。

Since the DTD defines the LINK element to be empty, LINK elements may not be nested either.

由于DTD将链接元素定义为空，所以链接元素也不能嵌套。

It would seem like alternatives such as those suggested in the selected answer in this question would have more of a chance of creating unexpected behavior than simply nesting the anchors would!

看起来，像在这个问题的选择答案中所建议的那样的替代方法比简单地嵌套锚更有可能产生意想不到的行为!

It also seems like overkill to make onclick event handlers just to redirect the page in JS. Not to mention using a script solution would cause problems for users browsing with scripts disabled.

让onclick事件处理程序仅仅在JS中重定向页面似乎有些过分。更不用说使用脚本解决方案会给禁用脚本的用户带来问题。

EDIT

编辑

What is interesting was that I was working on a fiddle to demonstrate and I had overlooked that chrome was actually restructuring the DOM as such:

有趣的是，我当时在做一个小提琴的演示，我忽略了chrome实际上是在重组DOM:

<div id="container">

    <a href="http://yahoo.com"></a>
    <div class="parent">
        <a href="http://yahoo.com">Parent Element</a>
        <a href="http://google.com">
            <div class="child">Child Element</div>
        </a>
        <a href="http://bing.com">
            <div class="child">Other Child</div>
        </a>
    </div>

</div>

I overlooked this because I saw the hover working and had my mouse on the text. Knowing this now doesn't necessarily change my question, but it sure does illustrate that it doesn't even work the way I thought.

我忽略了这一点，因为我看到鼠标悬停在文本上。知道这一点并不一定会改变我的问题，但它确实说明了它甚至不像我想的那样。

3 个解决方案

#1

Keep in mind that an anchor isn't just a link, it's also something to which one can link. (Though the former use is far more common than the latter.) Quoting W3C (old, but relevant):

记住，锚不仅仅是一个链接，它也是一个可以链接的东西。(尽管前者比后者普遍得多。)引用W3C(旧的，但相关的):

An anchor is a piece of text which marks the beginning and/or the end of a hypertext link.

锚是一段文字，它标志着超文本链接的开始和/或结束。

To that end, don't think of an anchor as a link. Think of it as a point in the document which connects to (and/or from) another point (in the same document or another document, it makes no difference). Two points in some non-physical space which are connected by a non-physical thread.

为此，不要把锚当作链接。把它看作是文档中的一个点，它连接到(和/或)另一个点(在同一个文档或另一个文档中，它没有任何区别)。由非物理线程连接的非物理空间中的两点。

Given that, anchors shouldn't contain a lot of content. If it contains a lot of content, it ceases to become a "point" and starts to become an "area." For example, imagine an anchor which when rendered takes up more space than the browser can display at once. If something links to that anchor, where should it go? The beginning? Middle? End? (Intuitively you might think the beginning, but you get the idea.)

因此，锚点不应该包含很多内容。如果它包含了大量的内容，它就不再是一个“点”，而是开始成为一个“区域”。例如，假设一个锚点在呈现时占用的空间超过浏览器一次显示的空间。如果有东西链接到那个锚，它应该去哪里?一开始吗?中间吗?结束?(直觉上，你可能会想到开头，但你懂的。)

Furthermore, anchors definitely shouldn't contain other anchors. The non-physical connections between the non-physical points can become ambiguous. Does the child anchor connect to the other point, or does the parent anchor connect to the other point? This probably doesn't result in being a big deal in most cases, since the vast majority of anchors today are one-way links from the anchor to another document. But the purpose of the anchor is more than just a one-way link to another document, so the definition continues to embody that purpose.

此外，锚绝对不应该包含其他锚。非物理点之间的非物理连接可能变得不明确。子锚是否连接到另一个点，或者父锚是否连接到另一个点?在大多数情况下，这可能不会带来什么大问题，因为现在绝大多数锚点都是从锚点到另一个文档的单向链接。但是锚的目的不仅仅是指向另一个文档的单向链接，因此定义继续体现了这个目的。

#2

The spec for <a> has a content model of:

规范的内容模型为:

Transparent, but there must be no interactive content descendant.

透明，但不能有交互内容的后代。

So the spec is actually more complicated than you say. This also applies to <button> -- essentially you can't have working links inside of links or buttons inside of buttons.

所以这个规范实际上比你说的要复杂。这也适用于

Unfortunately I don't have a strong answer to your question why -- I can only speculate. One clear reason is the ambiguity that it causes (e.g. which anchor should be followed when the inner one is clicked?)

不幸的是，我对你的问题没有一个强有力的回答——我只能推测。一个明显的原因是它引起的不确定性(例如，当点击内部锚点时，应该遵循哪个锚点?)

This creates not only functional ambiguity, but also semantic ambiguity. The content of the <a> is a label for its hyperlink. So does this mean that the inner hyperlink is part of the label for the content of the outer link?

这不仅造成了功能上的歧义，而且造成了语义上的歧义。的内容是其超链接的标签。这是否意味着内部超链接是外部链接内容的标签的一部分?

#3

Anchor nesting is not recommended by standards (although all browsers I tested it on seem to lead to the innermost click target) because of ambiguity.

标准不推荐锚点嵌套(尽管我测试过的所有浏览器似乎都指向最内层的单击目标)，因为不明确。

It is not logic to say that a big part should lead to a certain page and in this part a small section should lead somewhere else. I still have to see any use case for this kind of behaviour. With the evolution of available scripting languages, this kind of iteration or heritage can work (javascript click events on divs for exemple), but never will a code want to direct to a certain URL and then to another (parent anchors' href).

说一个大的部分应该指向一个特定的页面，而在这一部分，一个小的部分应该指向另一个地方，这是不合逻辑的。我仍然需要看到这种行为的任何用例。随着可用脚本语言的发展，这种迭代或继承可以工作(例如，javascript单击divs上的事件)，但是代码永远不会希望直接指向某个URL，然后指向另一个URL(父锚的href)。

Edit: Looking at the question you referenced in yours, stacking 2 anchors that point to the exact same href is completely useless. Just remove the nested one and everything is gonna be good. If it is because you did a CSS rule like a a{color:red;} use a span! Or even a div with display:inline but please, pretty please, an anchor should go somewhere, should not be used just for styling purpose or something.

编辑:查看您在您的问题中提到的问题，将两个指向相同href的锚堆起来是完全没用的。只要去掉嵌套，一切都会好起来的。如果是因为您使用了CSS规则，比如{color:red;}，请使用span!或者甚至有一个带显示的div:inline，但请，拜托，一个锚应该放在某个地方，不应该仅仅用于样式化目的或其他用途。

#1