跨度内锚或锚内跨度或无关紧要？答案

【问题标题】：Span inside anchor or anchor inside span or doesn't matter?跨度内锚或锚内跨度或无关紧要？
【发布时间】：2010-12-18 07:21:46
【问题描述】：

我想嵌套span 和a 标签。我应该

将 放入<a>
将<a> 放入
没关系？

【问题讨论】：

标签： html css semantic-markup

【解决方案1】：

3 - 没关系。

但是，我倾向于只在<a> 内使用，如果它仅用于标签内容的部分，即

<a href="#">some <span class="red">text</span></a>

而不是：

<a href="#"><span class="red">some text</span></a>

这显然应该是：

<a href="#" class="red">some text</a>

【讨论】：

我最近遇到了 text-overflow:ellipsis 和 overflow:hidden 的空白问题，可以通过向我的导航按钮添加 inline-block 元素来解决。我最终得到了 Text。所以我认为（或希望 ;)）当你真正需要时这样做是可以的。
我会选择选项 2，因为它确实很重要。 Anchor 应该只用于锚定而不是包含元素（最佳实践）。想象一种情况，您制作了一个可点击的磁贴，锚点是磁贴组件的父元素，组件内部是图像的链接，还有更多图像。 Google 抓取工具会发疯，最终会发疯，这对您的网站不利。
@ImamBux - 我会做相反的事情，选择选项 1，因为锚（通常）不是跨度所代表的部分，但所代表的东西是锚的一部分。想象一个链接到地图的地址； <address> 是（或整个）链接的一部分，但链接 <a> 不是地址的一部分。使用选项 2，<a><img...></a> 很常见，您最终可能会经常违反您的规则。

【解决方案2】：

将 嵌套在<a> 中或将<a> 嵌套在 中是完全有效的（至少按照HTML 4.01 和XHTML 1.0 标准）。

只是为了向自己证明，您可以随时查看W3C MarkUp Validation Service

我尝试验证：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <html>
    <head>
      <title>Title</title>
    </head>
    <body>
       <p>
         <a href="http://www.google.com/"><span>Google</span></a>
       </p>
    </body>
  </html>

也和上面一样，但是<a>在里面

即

<span><a href="http://www.google.com">Google</a></span>

同时使用 HTML 4.01 和 XHTML 1.0 文档类型，并且都成功通过了验证！

唯一需要注意的是确保以正确的顺序关闭标签。因此，如果您以  开头，然后是 <a>，请确保在关闭  之前先关闭 <a> 标签，反之亦然。

【讨论】：

【解决方案3】：

没关系 - 他们都被允许在彼此内部。

【讨论】：

【解决方案4】：

这取决于您要标记的内容。

如果您想在 span 中添加链接，请将 <a> 放在  中。
如果您想在链接中标记某些内容，请将 放入<a>

【讨论】：

【解决方案5】：

SPAN 是一个GENERIC 内联容器。 a 是在 span 内还是 span 在 a 内都没有关系，因为两者都是内联元素。随意做任何你认为逻辑正确的事情。

【讨论】：

【解决方案6】：

这取决于跨度的用途。如果它指的是链接的文本，而不是链接的事实，请选择#1。如果跨度指的是整个链接，则选择#2。除非您解释跨度代表什么，否则没有比这更多的答案了。它们都是内联元素，可以按任何顺序在语法上嵌套。

【讨论】：

正确，它们都是内联元素。

【解决方案7】：

例如，如果您使用某种图标字体，这可能很重要。我刚才有这个：

<span class="fa fa-print fa-3x"><a href="some_link"></a></span>

通常我会将跨度放在 A 内，但样式直到将其换成圆形才生效。

【讨论】：

【解决方案8】：

就个人而言，作为一名 Web 开发人员，我只会在尝试突出显示链接文本的一部分（例如为一个部分应用背景）时在锚标记中放置一个跨度。

【讨论】：

【解决方案9】：

两者都可以，但我个人更喜欢选项 2，因此跨度“围绕”链接。

【讨论】：

【解决方案10】：

从语义上来说，我认为作为单个元素的容器更有意义，如果您需要嵌套它们，那么这表明不止一个元素将位于外部元素的内部。

【讨论】：