HTML5 语义 - 在产品列表中使用 h1

Question

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

技术上可以使用多个h1 标签，如果它们被包裹在section 或article 中。但是我们正在讨论是否在列表器中使用h1 也有用，如果我们只有标题、包装和价格。在我们看来，在缺少（SEO 方面）有意义的内容时选择 h1 并不是一个好主意。

以下是 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。