HTML & CSS 3 在锚点或使用位置使其“正确”具有不同的含义？答案

【问题标题】：HTML & CSS 3 spans different meaning in anchor or using position to make it "right"?HTML & CSS 3 在锚点或使用位置使其“正确”具有不同的含义？
【发布时间】：2013-03-08 14:13:06
【问题描述】：

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

我相信您没有通过阅读标题了解我想要的内容。
我不知道如何写一句话来总结我的问题。

所以，这是我的问题：
我的锚里面有 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>

full jsfiddle of the code above

我有另一种方法来做到这一点，我认为这是正确的方法，但我不确定......
我的第二种方法是使用带有两个元素的 div，锚点和另一个包含文本的 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>

full jsfiddle of the code above

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

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

~谢谢

【问题讨论】：

我想两者都很棒，我会保留第一个，少用divs 和更漂亮的代码:)。
我们有一个time 元素：html5doctor.com/the-time-element
@cimmanon 不关心 html5。
在 SEO 方面，您是否关心 HTML5 无关紧要：重要的是搜索引擎关心什么。如果 Google 关心time 标签，那么您不使用它就是在自取其辱。

标签： html css seo css-position

【解决方案1】：

这完全取决于你的口味。

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

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

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

【讨论】：

【解决方案2】：

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

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

编辑

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：