So we’ve probably all come across that situation where we have a nice list of articles, or images with descriptions that we want to make clickable.

Often we see developers wrap an anchor tag around the image, and another one around the text.. take this fairly standard example:

<div class="list-item">
 <div class="item-img">
 <a href="#"><img src="myimage.jpg"></a>
 </div>

 <div class="item-text">
 <a href="#">Check out this awesome article about cats!</a>
 </div>
</div>

That looks great, but there are a couple of issues:

  • You have to create two anchor tags
  • You probably have to fix some CSS to make sure there are no borders, or horrible underlines
  • It doesn’t make the whole element clickable..

Continue reading