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>
alt
s is a code smell. \$\endgroup\$ – ANeves wants peace for Monica Feb 26 '14 at 15:23