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

我们正在讨论在产品列表页面中使用h1标签。有几个方面可以用来过滤产品。HTML5语义 - 产品列表中的h1用法

技术上明智的做法是使用多个h1标签，如果这些标签被封装在section或article中即可。但是我们正在讨论如果在制表人中使用h1也是有用的，我们只有标题，包装和价格。在我们看来，选择h1并不是一个好主意，而（SEO明智的）有意义的内容不见了。

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

来源

2016-03-01 tortuga

我会使用H2产品标题，保留h1的类别和促销件。（排名为关键字搜索的产品）可能？到目前为止，我只是随便看看SEO的东西。 – Hughzi

请阅读此：https://www.paciellogroup.com/blog/2013/10/html5-document-outline/ – Alohci

如果要使用切片内容元素（如article），最好提供标题元素。如果你想遵循advice in W3C’s HTML5，你应该使用适当级别的标题元素（可能是support user-agents that don’t support the outline algorithm），而不是一直使用h1（但也允许h1，并且语义上相同）。

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

来源

2016-03-03 10:13:21 unor

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

回答

相关问题