Question

我的网页中的每个品牌都有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，因为title内容属于hyperlink alt

中的image中的1}}和heading属性

这是list item

的结果之一

Result Image

Answer 1

<ul>内部应该有<li>个标签，所以我认为第一个标记更合适，如果要关注<div>内的<a>元素。将您的<a>设置为display: block;，第一个就是正确的。

Answer 2

在您的第一个示例中，h2未描述li的内容。在此标题的范围内是一切跟随它，直到下一个标题开始。事实上，前一个标题将描述以下内容，依此类推。当在列表中没有分割元素的情况下使用标题时，总会出现此问题。

在您的第二个示例中，h2可能包含的内容超过了它（两次＆＃34; mallname＆＃34 ;; 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>

Answer 3

您缺少<ul>标记所需的<li>代码。

假设您添加了<ul> - 缺少的标记：<ul>不允许作为<h2>的子元素，因此将第二个版本渲染为无效= ＆GT; 第一个是＃34;更正确＆＃34; 。

测试，我冒昧地添加了遗失的<ul>＆amp;强制父母，doctype是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标记更正确

3 个答案: