哪些HTML5标签在语义上正确地表示电子商务产品？

Question

我应该使用无序列表<ul><li>来包装产品吗？

如何在不使用JavaScript，仅使用HTML的情况下使产品可点击？ 我可以用以下方式包装每个产品：

      <a href="linkToProduct">
       <article>
         <h3>Product 1</h3>
         <img src="images/product1.png" alt="product 1">
         <p><data value="50">50</data>$</p>
      </article></a>

这是我的代码：

<section id="my-products">
      <h1>My Products</h1>
      <article>
        <h3>Product 1</h3>
        <img src="images/product1.png" alt="product 1">
        <p><data value="50">50</data>$</p>
      </article>
      <article>
        <h3>Product 2</h3>
        <img src="images/product2.png" alt="product 2">
        <p><data value="130">130</data>$</p>
      </article>
      <article>
        <h3>Nikon D7000</h3>
        <img src="images/product3.png" alt="product 3">
        <p><data value="56">56</data>$</p>
      </article>
</section>

- willmaz

---

好的，谢谢。使用<figure>、<figcaption>来表示每个产品及其标题是否正确？ - willmaz

对我来说，这听起来比<article>更合适。 - Ry-

Answer 1

article 元素是产品的正确选择。

如果你有一系列的产品，你可以使用 ul 元素，但是并不一定必须使用。在没有 ul 元素的情况下，在 section 元素中放置多个 article 元素也是可以的。

为了使整个产品内容可点击，你可以将所有内容包含在 a 元素中。但与其使用 <a><article></article></a>，更好的方式可能是使用 <article><a></a></article>，因为这样允许你使用 bookmark 链接类型：

<article>
  <a href="" rel="bookmark">
    <!-- … -->
  </a>
</article>

- unor

---

article 标签不适合此示例，请参见此答案。 - Ghassen Rjab

@GhassenRjab：我不同意那个答案（在我的回答中链接了一个答案，也回答了那个问题）。如果你的产品预告有标题，你应该使用一个分区内容元素。由于nav和aside不合适，只剩下section或article。产品预告仍然是“自包含”的（你不需要上下文来理解它），所以article是更具体（“语义化”）的选择。 - unor

我同意@unor的观点，对于独立内容，例如博客文章和产品，可以从这个网站中移除但仍然可以理解。 - willmaz

Answer 2

首先，是的，您需要使用<ul><li>将产品进行包裹，并在其中使用<a>标签。

其次，在您的情况下，可以使用<article>来代表一个产品，并且您也可以使用itemtype属性。同时，请不要在没有使用<h2>的情况下放置<h3>。

因此，您的代码应该如下所示:

<section id="my-products">
  <h1>My Products</h1>
  <ul>
    <li>
      <a href="product_link">
        <article class="product-item" itemscope itemtype="http://schema.org/Product">
          <h2 itemprop="name">Product 1</h2>
          <img src="images/product1.png" alt="product 1">
          <p><data value="50">50</data>$</p>
        </article>
      </a>
    </li>
    <li>
      <a href="product_link">
        <article class="product-item" itemscope itemtype="http://schema.org/Product">
          <h2 itemprop="name">Product 2</h2>
          <img src="images/product2.png" alt="product 2">
          <p><data value="130">130</data>$</p>
        </article>
      </a>
    </li>
    <li>
      <a href="product_link">
        <article class="product-item" itemscope itemtype="http://schema.org/Product">
          <h2 itemprop="name">Nikon D7000</h2>
          <img src="images/product3.png" alt="product 3">
          <p><data value="56">56</data>$</p>
        </article>
      </a>
    </li>
  </ul>
</section>

- Ghassen Rjab

---

为什么你不想在这里使用 article？因为你正在使用标题，已经隐式地创建了一些部分，但最好将部分明确化。因此，应该使用一个分区内容元素，并且在这里 article 是合适的选择。 - unor

这是我开发网站的方式。在产品详情页面中，我使用 article 而不是在包含照片、名称和价格的列表中使用。那不是一个完整的文章。你可以看到其他网站，比如 Amazon.com， Balibart 和 eBay，他们在列出产品时都没有使用 article 标签。 - Ghassen Rjab

它不必是完整的内容，只要它是自包含的（例如，可以出现在一个feed中）。当然，有些情况下你不需要分节内容元素（例如，如果你只有产品名称链接到产品页面），但是一旦你使用标题元素（h1-h6），你就正在创建章节，HTML规范建议使章节明确。然后你可以选择section和article之间的区别，而产品（或产品预告）的情况符合article的定义。 - unor

我编辑了我的答案，使用<article>代替<div>。 - Ghassen Rjab

只想澄清一些误解。“不要在没有使用<h2>的情况下放置<h3>”-这更像是个人观点。 在没有使用h2的情况下使用h3是可以的。（问题出现在两者都用于同一部分内容并且h3在h2之前）“将产品包装在<a>标签中。”这取决于意图。这是您展示产品链接的列表还是产品列表。 - apnerve

根据teamtreehouse.com的说法，"您不应该将块级元素放在内联元素中，因为这会破坏元素结构。内联元素应该位于块级元素内，以便正确呈现并遵循内容流。" - Vince Ybañez