Как сделать правельный переход по ссылке

верстаю макетик и тут задался вопросом .

Как сделать переход по ссылке правильно , макет -

код -

<ul class="list">
  <li>
    <div class="wrapper">
           <div class="image"></div>
           <h3>The whale and the polar bear: Lacanian considerations about DSM- V</h3>
           <div class="wrapper_info">
             <span>By Sergio Laia</span>
             <span>Audio in: Spanish</span>
           </div>
           <ol class="list">
            <li>Miquel</li>
            <li>Miquel</li>
            <li>Miquel</li>
            <li>Miquel</li>
            <li>Miquel</li>
         </ol>
      </div>
   </li>
</ul>

как сделать это-т блок ссылкой ? поместить все елементы в тег <a> , или можно получше сделать ?