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

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>