HTML和CSS 3在锚中使用不同的含义或使用位置使其"正确"？

Question

编辑:
如果相反的日期,我需要描述？(我应该使用段落,并且验证段落不能成为锚点,因为段落是块级别)
编辑结束

我相信通过阅读标题你不明白我想要什么.
我不确定如何写一个句子来概括我的问题.

所以,这是我的问题:
我在其中有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有两个元素,锚和另一个包含文本的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本身).

编辑:
如果相反的日期,我需要描述？(我应该使用段落,并且验证段落不能成为锚点,因为段落是块级别)
编辑结束

〜谢谢

Answer 1

这非常符合您的口味.

由于以下原因,我更喜欢第一个:

• 较小的标记 - >更好的概述和可维护性以及较小的文件大小
• 没有绝对定位 - 应尽可能避免(代码的性能和稳健性)
• 语义更清晰 - 元素属于链接(如果这是你的标记的情况)

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