html - 哪些 HTML5 标签在语义上正确代表电子商务产品？

Question

我应该用无序列表包装产品<ul><li> ?

如何在没有 JavaScript 的情况下仅使用 HTML 使产品可点击？我可以用以下 Material 包装每个产品吗？

      <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>

Answer 1

article element 是产品的正确选择。

如果您有产品列表，您可以使用 ul元素，但是 you don’t have to .放置多个 article section 中的元素没有 ul 的元素元素也不错。

要使产品的全部内容都可点击，您可以将所有内容包装在 a 中。元素。但不是使用 <a><article></article></a> ，最好使用 <article><a></a></article> , 如 this allows您使用 bookmark链接类型:

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