跨度在锚内还是跨度在锚内无关紧要？

109

我想嵌套span和a标记。我是不是该

放在里面<a>
放在<a>里面
没关系吗

html css semantic-markup

— 萨尔曼A
source

110

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>

— 乔恩·哈德利
source

1

最近，我遇到了文本溢出，省略号和溢出：隐藏的空白问题，可以通过在导航按钮中添加内联块元素来解决。我最后得到了<a> Text </a>。因此，我认为（或希望;））在您确实需要时可以这样做。

— CunningFatalist 2014年

我会选择选项2，因为它很重要。锚应仅用于锚固，而不用于包含元素（最佳做法）。想象一下一种情况，您创建一个可单击的图块，锚点是图块组件的父元素，而组件内部是图像以及更多图像的链接。Google搜寻器会发疯，最终将对您的网站不利。

— 伊玛目·布克斯

33

将an 嵌套在<a>或内<a>内将。

只是为了向自己证明，您可以随时检查 W3C标记验证服务

我尝试验证：

<!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>确保<a>先关闭标记，然后再关闭，反之亦然。

— 克雷格TP
source

20

没关系-两者都可以互相允许。

— 格雷格
source

但是<a>是块级，而是行内元素，并且块级元素不能进入行内元素。我认为这是在w3c验证中

— Jitendra Vyas，2009年

26

不，两者都是内联

— Greg

16

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

如果要在跨度<a>内链接，请放在内。
如果你想标记在一个链接的东西，把成<a>

— 针织
source

16

SPAN是GENERIC内联容器。an a是在内部span还是span内部a都无所谓，因为两者都是内联元素。随意做在逻辑上对您来说正确的事情。

— 萨尔曼A
source

2

这取决于跨度是什么。如果它引用链接的文本，而不是链接的事实，请选择＃1。如果范围指的是整个链接，则选择＃2。除非您解释跨度代表什么，否则答案将不止于此。它们都是内联元素，可以在语法上以任何顺序嵌套。

— 西科拉
source

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

— 克里斯，2009年

2

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

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

通常我将跨度放在A内，但直到将其四舍五入后，样式才生效。

— 用户名
source

1

就个人而言，作为一名Web开发人员，如果要突出显示链接文本的某一部分（例如将背景应用于一个部分），则只会在锚标记中放置一个范围。

— Xopa
source

0

两者都可以使用，但就我个人而言，我更喜欢选项2，这样跨度就在链接的“周围”。

— Oldskool
source

0

从语义上讲，我认为更合理的做法是将单个元素包含在容器中，如果需要嵌套它们，则表明在外部元素内部的元素要多于其他元素。

— 托比
source