Question

我们正在讨论产品列表页面中h1标记的用法。有几个方面可用于过滤产品。

技术上明智的是，如果它们包含在h1或section中，则可以使用多个article标记。但我们正在讨论如果在列表中使用h1也很有用我们只有标题，包装和价格。在我们看来，选择h1并且（SEO-wise）有意义的内容缺失并不是一个好主意。

以下是1个产品的加价。如果没有选择方面，我们会列出100多种产品（延迟加载）。

<div class="productItem--vView productItem" data-webid="productLister-item">
  <article>
    <a class="wrap" href="/products/category">
      <header>
        <h1><span>product x</span></h1>
        <div class="meta">
          <div class="spec  price price--new">
            <div class="value">
              <span class="currency">&#8364;</span> 10<span class="decimal">.00</span>
              <span class="type">new</span>
            </div>
          </div>
        </div>
      </header>
      <figure>
        <div class="image">
          <div class="graphic">
            <img src='https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=230&h=300'/>                                
          </div>
        </div>
      </figure>
    </a>
  </article>
</div>

在这里使用h1是否正确，以及这里最好的选择。 h2？

Answer 1

如果您想使用切片内容元素（如article），最好提供一个标题元素。如果您想关注advice in W3C’s HTML5，则应使用相应排名的标题元素（可能是support user-agents that don’t support the outline algorithm），而不是始终使用h1（但h1是允许，也和语义相同）。

但是，在您的情况下，您可能不需要分区内容元素，因为您只有标题/链接，图像和价格。在文档大纲中创建100多个条目似乎不适合这种“小”内容。您可以使用ul并将每个产品放在li中，也可以为每个产品使用figure。

HTML5语义 - 产品列表中的h1用法

1 个答案: