2

编辑：
如果不是日期，我需要描述怎么办？（比我应该使用段落，并且验证段落不能在锚中，因为段落是块级）
编辑结束

我相信你看标题没有明白我想要什么。
我不确定如何写一句话来总结我的问题。

所以，这是我的问题：
我的锚里面有 3 个不同的东西 > 图标、标题和日期。每个都在不同的跨度。
我不知道它是否是正确的方法。

<ul id="m-items">
    <li>
        <a href="/post.php?name=ahf-_" class="m-item-header clear">
            <span class="m-item-icon"></span>
            <span class="m-item-title">ah%f#-$%^&amp;()_!</span>
            <span class="m-item-date">17 Feb 2013</span>
        </a>
    </li>
    <li>
        <a href="/post.php?name=d-3" class="m-item-header clear">
            <span class="m-item-icon"></span>
            <span class="m-item-title">d-3</span>
            <span class="m-item-date">16 Feb 2013</span>
        </a>
    </li>
</ul>

上面代码的完整jsfiddle



我有另一种方法，我认为这是正确的方法，但我不确定......
我的第二种方法是使用带有两个元素的 div，anchor 和另一个包含文本的 div。
每个都将处于绝对位置。

<ul id="m-items">
    <li>
        <div class="m-item-header">
            <a href="/post.php?name=ahf-_"></a>
            <div class="m-item-header-content clear">
                <div class="m-item-icon"></div>
                <div class="m-item-title">ah%f#-$%^&amp;()_!</div>
                <div class="m-item-date">17 Feb 2013</div>
            </div>
        </div>
    </li>
    <li>
        <div class="m-item-header">
            <a href="/post.php?name=d-3"></a>
            <div class="m-item-header-content clear">
                <div class="m-item-icon"></div>
                <span class="m-item-title">d-3</span>
                <span class="m-item-date">16 Feb 2013</span>
            </div>
        </div>
    </li>
</ul>

上面代码的完整jsfiddle

我想知道哪种方法是正确的以及为什么（对于 SEO 和 HTML 本身）。

编辑：
如果不是日期，我需要描述怎么办？（比我应该使用段落，并且验证段落不能在锚中，因为段落是块级）
编辑结束

~谢谢

4

4 回答 4

5

这几乎取决于你的口味。

由于以下原因，我更喜欢第一个：

  • 更少的标记 -> 更好的概览和可维护性以及更小的文件大小
  • 没有绝对定位 - 应尽可能避免（代码的性能和健壮性）
  • 语义上更清晰 - 元素属于链接（如果您的标记是这种情况）

从 SEO 的角度来看，第一个解决方案显然更好，因为元素和链接之间的相关性很明确，而第二个代码示例则不是这样。

于 2013-03-08T14:19:43.453 回答
3

不确定 SEO 的含义是什么（如果确实有的话），但两者对您的网站行为有不同的含义。

第二个示例中的那个锚标记将是不可点击的。如果其中没有某种内容，它对用户来说将显得毫无意义，并且您试图实现的导航方面（如指向另一个页面的 href 所证明的那样）将不起作用。

编辑

这就是我没有先看小提琴的结果。是的，以上是错误的，您通过将锚点叠加在其他内容上来实现这一点。我同意上面的海报，将您的内容包裹在锚元素中在语义上是正确的，这就是我的建议。

于 2013-03-08T14:20:20.623 回答
0

两者都不是正确的，但两者都不是错误的。从可用性的角度来看，我强烈支持第一个，因为项目数据都包含在链接中，因此更易于导航。

于 2013-03-08T14:21:06.317 回答
0

出于 SEO 目的以及最佳实践使用锚标签以及您试图实现的第二个是“错误的”，因为 div 和两个跨度不包含在锚标签中。

也就是说，您绝对应该使用第一个，因为它在语义上更清晰易读，我以最小的努力理解那里发生的事情。除此之外，跨度都包含在锚标记内，这对于 SEO 和 HTML 的正确使用在语法上都是正确的。

除了使用 UL 和 LI 并使您的图标替代“项目符号”点之外，我想不出另一种方法来做到这一点。

于 2013-03-08T14:26:18.960 回答