在 HTML5 中标记产品框

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>
    9 
  </p>
  <a href="#" class="product__box-button role="button">
    Add To Cart 
  </a>
</div>

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

The article element (...) could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

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

Answer 1

这几乎是有争议的，取决于您网站的一般语义，但我认为您可以在您的示例中用文章更改周围的 div。

如规范所述：

article

Represents a section of a page that consists of a composition that forms an independent part of a document, page, or site.

我认为 "product box"（a.k.a。据我所知是预告片）是 "composition that forms an independent part"...

一些关于 article-tag 和 HTML5 语义的进一步阅读：

html5doctor: Let's talk about semantics

adactio.com: Pursuing semantic value

在 HTML5 中标记产品框

Marking up product boxes in HTML5

html

product

semantic-markup