Question

在HTML5中标记产品的语义正确方法是什么？

这就是我目前的做法。我在以下示例中使用BEM：

<div class="product__box">
  <h2 class="product__box-title"> 
    Chair
  </h2>
  <img class="product__box-img" src="but-can-it-do-this.jpeg" alt="image-of-chair">
  <p class="product__box-price>
    $399 
  </p>
  <a href="#" class="product__box-button role="button">
    Add To Cart 
  </a>
</div>

我看到有些人使用<article>标签而不是<div>，但我不确定这是否正确。这是W3C的缩写定义：

article元素（...）可以是论坛帖子，杂志或报纸文章，博客条目，用户提交的评论，交互式小部件或小工具，或任何其他独立的内容项目

您如何标记产品以遵循HTML5规范？

Answer 1

这非常适合辩论，取决于您网站的一般语义，但我认为您可以通过示例中的文章更改周围的div。

正如规范所述：

制品

表示由合成组成的页面的一部分   形成文档，页面或网站的独立部分。

我认为“产品盒”（据我所知，a.k.a. teaser）是“构成独立部分的构成”......

关于文章标签和HTML5语义的进一步阅读：

html5doctor: Let's talk about semantics

adactio.com: Pursuing semantic value

在HTML5中标记产品包装盒

1 个答案: