这个 html 标记中哪个更正确答案

【问题标题】：which of this html markup is more right这个 html 标记中哪个更正确
【发布时间】：2014-08-27 07:33:20
【问题描述】：

我的页面中的每个品牌都有一个这样的 HTML 标记

<ul>
    <li>
        <a title="mallname" href="/brand/mallname">
            <div class="image">
                <img src="/Images/mallname.png" alt="mallname" />
            </div>
            <div class="title">
                <h2>mallname</h2>
            </div>
        </a>   
    </li>
</ul>

heading 在hyperlink 中的位置是否可以，或者我应该将其更改为

<ul>
    <li>    
        <h2>
            <a title="mallname" href="/brand/mallname">
                <div class="image">
                    <img src="/Images/mallname.png" alt="mallname" />
                </div>
                <div class="title">
                    mallname
                </div>
            </a>   
        </h2>
    </li>
</ul>

哪一种写法更正确，crawler 在这两种情况下读取heading 的结果是什么？

如果在第一个中，heading 的内容只有 mallname，那么第二个会被读取为 mallname mallname mallname，因为在 hyperlink 和 alt 中的属性image 内heading

这是list item 的结果之一

【问题讨论】：

你的测试告诉你什么结果？
@Fildor，你说我的测试是什么意思？目前我在现场环境中使用第一个，但是当被告知另一种编写方式时，我很困惑。
您刚刚尝试过吗？然后你应该看看结果是什么，并决定它是否是你想要的。如果两者都是有效的 html，那么更正确的是给出想要的输出，对吧？
@Fildor 我使用第一个已经大约 6 个月了，结果（ui）两种方式都是一样的。所以两种写法都是有效的，但是在heading 中的第二种方式是什么，它只是div 内的文本还是title 和alt 属性将被视为heading也？对seo有影响吗？
啊，现在我明白了。我完全误解了这个问题，对不起。

标签： html markup web-crawler html-heading

【解决方案1】：

在您的第一个示例中，h2 没有描述li 的内容。这个标题的范围是它后面的所有内容，直到下一个标题开始。所以其实前面的标题会描述后面的内容，以此类推。当使用标题而不对列表中的元素进行分段时，总是会出现这个问题。

在您的第二个示例中，h2 可能包含更多内容（两次“mallname”；title 属性中的那个不被视为标题内容的一部分）。但这里的实际内容是什么？只有一个标题，似乎没有意义。

您的alt 内容可能不正确/无用。当它与相应的标题完全相同时，您可能应该使用一个空的alt 值。但图片很可能代表除标题之外的其他内容：请在 alt 内容中描述。

在title 属性中复制标题内容似乎也没有任何意义。仅将其用于其他有用（但非必要）的内容。

所以你应该使用别的东西：分割元素。从截图来看，可能是article合适（如果不合适，就用section）。

通过使用像article 这样的分段元素，标题不必放在顶部。

<ul>
  <li>
    <article>
      <a href="/brand/mallname">
        <img src="/Images/mallname.png" alt="Mallname offers … and …. It’s ….">
        <h2>mallname</h2>
      </a>
    </article>
  </li>
</ul>

但是，仅当h2 描述ìmg 时才使用它！当图像只是标题的替代品（或只是装饰，并且实际图像内容与此上下文无关）时，为什么要使用标题呢？在这种情况下，您将只有一个链接列表：

<ul>
  <li><a href="/brand/mallname"><img src="/Images/mallname.png" alt=""> mallname</a></li>
</ul>

【讨论】：

感谢您的澄清，如果我的页面仅包含list item 和您推荐的markup，是否适合对每个项目使用article 或section，是否更好为此使用<h1> 或<h2>，并且可以在一页中有许多article，因为我的页面(dynamic) 包含这些markup 的平均350 个项目
@Kyojimaru：如果它只是一个链接列表（有或没有非必要图像），请不要为每个条目使用分段元素（这将是我的第二个示例）。如果每个条目都包含内容（这是我的第一个示例），您可以使用h1 或适当的标题级别（h2-h6）。一个页面上可以使用多少个article 元素没有限制，但是对于您的用户来说肯定有一些限制，之后就很难使用/阅读它，对吧？

【解决方案2】：

<ul> 内部应该去<li> 标签，所以我认为第一个标记更正确，如果闭上眼睛<a> 内部的<div> 元素。将您的<a> 设置为display: block;，您将正确使用第一个。

【讨论】：

抱歉，输入错误，<li> 标签在heading 之外，编辑了问题
你为什么不使用实际代码而不是输入你所拥有的粗略近似值？这是惹恼其他 SO 用户的好方法！
@Lee 好吧，抱歉。这是我在第一个代码中的实际代码，即使它已从任何不必要的长属性中剥离。至于第二个代码，我想知道哪种方式更好，所以在<li> 和<h2> 之间存在我的打字错误，因为我的实际代码使用的是第一个。再次为我的错误道歉。

【解决方案3】：

您缺少作为 <li> 标记的父级所需的 <ul> 标记。

假设您要添加缺少的 <ul>-tags：<ul> 不允许作为 <h2> 的子元素，这样会使第二个版本不好 => 第一个是“更正确”。

测试，我冒昧添加了缺少的<ul>的&强制父母，文档类型是HTML5：

W3C markup validator为此开了绿灯：

<!DOCTYPE HTML>
<html><head><title>tets</title></head><body>
<ul><li>
    <a title="mallname" href="/brand/mallname">
        <div class="image">
            <img src="/Images/mallname.png" alt="mallname" />
        </div>
        <div class="title">
            <h2>mallname</h2>
        </div>
    </a>   
</li></ul>
</body></html>

W3C markup validator 给这个错误：

<!DOCTYPE HTML>
<html><head><title>tets</title></head><body>
<h2><ul>    
    <li>
        <a title="mallname" href="/brand/mallname">
            <div class="image">
                <img src="/Images/mallname.png" alt="mallname" />
            </div>
            <div class="title">
                mallname
            </div>
        </a>   
    </li>
</ul></h2>
</body></html>

【讨论】：

好的.. 现在您更改了问题的 HTML 内容，因此该答案不再有效。
抱歉改了，下次打字要仔细