锚点内嵌套span还是span内嵌套锚点，或者不区分？

Question

锚点内嵌套span还是span内嵌套锚点，或者不区分？

htmlcsssemantic-markup

123

我想嵌套标签和标签，应该

把放在里面

把放在里面

没有关系？

- user214582

10个回答

37

在HTML 4.01和XHTML 1.0标准下，将嵌套在<a>中或者将<a>嵌套在中都是完全有效的。

你可以验证一下，为了证明这一点，你可以使用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>标签再关闭标签，反之亦然。

- CraigTP

20

无关紧要 - 两者都可以彼此包含。

- Greg

18

那取决于您想要标记什么。

如果您想在 span 中插入链接，请将 <a> 放置在  中。
如果您想标记链接中的内容，请将  放置在 <a> 中。

- knittl

17

SPAN是一个通用的行内容器。无论是将a放在中，还是将放在a中，两者都是行内元素。随意按照逻辑正确的方式进行操作。

- Salman A

2

这可能很重要，特别是当您使用某种图标字体时。我最近就遇到了这个问题:

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

通常我会把span放在A标签内，但是直到我交换它们的位置后，样式才生效。

- user1368737

2

这取决于span的用途。如果它指的是链接的文本，而不是链接本身，选择#1。如果span指的是链接作为一个整体，那么选择#2。除非您解释span代表什么，否则答案就只有这么多了。它们都是内联元素，可以按任意语法嵌套。

- sykora

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

1

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

- Xopa

0

这两种方式都可以，但我个人更喜欢选项2，这样span标签就会“包围”链接。

- Oldskool

0

从语义上讲，我认为

更合理，因为

是一个单一元素的容器，如果您需要嵌套它们，那么这意味着外部元素中将包含不止一个元素。

- Toby

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jon Hadley · Accepted Answer

121

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>

- Jon Hadley

1

最近我发现使用text-overflow:ellipsis和overflow:hidden时出现了空格问题，通过给我的nav按钮添加一个inline-block元素就解决了这个问题。我最终得到了<a>文本</a>。所以我认为（或者希望；）当你真的需要时这样做是可以的。 - CunningFatalist

我会选择选项2，因为它确实很重要。锚点应该只用于锚定而非包含元素（最佳实践）。想象一种情况，你制作了一个可点击的瓷砖，而锚点是瓷砖组件的父元素，在组件内部还有图片链接和更多图片。Google爬虫会变得疯狂，并最终导致网站出现问题，这对你的网站不利。 - Imam Bux

@ImamBux - 我会选择相反的方式，选择选项1，因为锚点（通常）不是span表示的一部分，但被表示的事物是锚点的一部分。想象一个链接到地图的地址；<address> 是链接的一部分(或全部)，但链接<a>不是地址的一部分。使用选项2，<a><img...></a>是很常见的，你可能会经常违反自己的规则。 - Stephen P