哪些HTML5标签在语义上是正确的，以表示电子商务产品？ [英] Which HTML5 tags are semantically correct to represent e-commerce products?

问题描述

我是否应该使用无序列表< ul>< li> ？

Should I wrap the products with unordered list <ul><li>?

如何在没有JavaScript的情况下点击产品，只使用HTML？我可以用以下内容包装每个产品：

How can I make products clickable without JavaScript, just using HTML? Can I wrap each product with:

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

推荐答案

文章元素是产品的正确选择。

The article element is the correct choice for a product.

如果您有产品清单，可以使用 ul 元素，但您没有必要。在部分元素中放置多个 article 元素，而不包含 ul 元素也很好。

If you have a list of products, you may use the ul element, but you don’t have to. Placing multiple article elements in a section element without a ul element is fine, too.

要使产品的整个内容可以点击，你可以将所有内容都包装在 a 元素。但是，不是使用< a>< article>< / article>< / a> ，而是使用<文章>< a>< / a>< / article> ，如这允许您使用书签链接类型：

To make the whole content of the product clickable, you may wrap everything in an a element. But instead of using <a><article></article></a>, it might be better to use <article><a></a></article>, as this allows you to use the bookmark link type:

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

这篇关于哪些HTML5标签在语义上是正确的，以表示电子商务产品？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！