Product grid for a online catalog

Question

I have this portion of code and I would like to know if I did it right, what changes could be done to optimize and make it better, and if I used the all the tags the right way. For the moment, the CSS part is not really done since I have few bugs on the height of each column.

<div class="shop-grid">
  <div class="container">
     <section class="col-group">
       <article class="col-3">
      <div class="item-container">
        <figure>
          <div class="container-thumb-screen"><span class="thumb-screen"></span></div>
            <img src="../public/uploads/productPictures/thumbnails/" alt="">
              <figcaption class="product-name">
                <h2><a href="">Hartie Copiator A4 Artist </a></h2>
              </figcaption>
        </figure>
        <div class="item-actions">
            <a href="" class="button"><i class="icon-heart"></i></a>
            <a href="" class="button"><i class="icon-shopping-cart"></i></a>
            <a href="" class="button"><i class="icon-double-angle-right"></i></a>
        </div>
      </div>
      </article>
                    <article class="col-3">
      <div class="item-container">
        <figure>
          <div class="container-thumb-screen"><span class="thumb-screen"></span></div>
            <img src="../public/uploads/productPictures/thumbnails/" alt="">
              <figcaption class="product-name">
                <h2><a href="">Hartie Copiator A4 Xerox Bussines</a></h2>
              </figcaption>
        </figure>
        <div class="item-actions">
            <a href="" class="button"><i class="icon-heart"></i></a>
            <a href="" class="button"><i class="icon-shopping-cart"></i></a>
            <a href="" class="button"><i class="icon-double-angle-right"></i></a>
        </div>
      </div>
      </article>
                    <article class="col-3">
      <div class="item-container">
        <figure>
          <div class="container-thumb-screen"><span class="thumb-screen"></span></div>
            <img src="../public/uploads/productPictures/thumbnails/" alt="">
              <figcaption class="product-name">
                <h2><a href="">Hartie Copiator A3 Xerox Bussines</a></h2>
              </figcaption>
        </figure>
        <div class="item-actions">
            <a href="" class="button"><i class="icon-heart"></i></a>
            <a href="" class="button"><i class="icon-shopping-cart"></i></a>
            <a href="" class="button"><i class="icon-double-angle-right"></i></a>
        </div>
      </div>
      </article>
                    <article class="col-3">
      <div class="item-container">
        <figure>
          <div class="container-thumb-screen"><span class="thumb-screen"></span></div>
            <img src="../public/uploads/productPictures/thumbnails/" alt="">
              <figcaption class="product-name">
                <h2><a href="">Hartie Copiator A3 Maestro</a></h2>
              </figcaption>
        </figure>
        <div class="item-actions">
            <a href="" class="button"><i class="icon-heart"></i></a>
            <a href="" class="button"><i class="icon-shopping-cart"></i></a>
            <a href="" class="button"><i class="icon-double-angle-right"></i></a>
        </div>
      </div>
      </article>
            </section>
       </div>
</div>

Answer 1

Don’t use i for font icons. Use span instead (like you did with .thumb-screen). The i element is not appropriate for such purposes.

In any case, you should offer alternative content for user-agents that have no CSS support. I.e., your links in .item-actions couldn’t be accessed by, for example, screen reader users. So add content and optionally hide it visually.

Then you might also consider using an ul for the three link actions.

The alt attribute for img should have content, unless the image is only decorative (but then you should better use CSS instead).

No need for h2 in figcaption. It’s already defined to be the caption (or "title" if you will) for this figure. It also doesn’t play a role in the document outline, because figure is a sectioning root. So if you want to provide a heading for the article, you need to place it outside of figure.