Which HTML5 tags are semantically correct to represent e-commerce products?

Question

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

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>

Here is my code :

<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

The article element is the correct choice for a product.

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.

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>

Answer 2

First, yes you need to use <ul><li> and wrap your products in <a> tags.

Second, in your case, you can use <article> to represent a product, and you can use as well the itemtype attribute. And don't put <h3> without using <h2>.

So your code would look like so :

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