コラム一覧や商品一覧でよく見るこんなページ

PCサイトなら、「詳しくを見る」部分だけがリンク領域でも問題なさそうだけど、スマホサイトの場合はBOX全体がリンク領域である必要があります。

【HTML】

  <li>
    <img src="img.jpg" alt="" />
    <h2>タイトル</h2>
    <span>説明が入ります。<br />
          説明が入ります。<br />
          説明が入ります。<br />
          説明が入ります。
    </span>
    <a href="">詳しく見る</a>
  </li>

HTMLだけで考えれば、＜li＞タグのすぐに＜a＞タグを入れればいんでしょうが、通常＜a＞タグはインライン要素なので、中に＜h＞や＜p＞のブロック要素を入れてはいけません。
なので、CSSで設定するのが一般的です。

CSSのpositionを使ってリンク領域をBOX全体に

【HTML】

  <li>
    <img src="img.jpg" alt="" />
    <h2>タイトル</h2>
    <span>説明が入ります。<br />
          説明が入ります。<br />
          説明が入ります。<br />
          説明が入ります。
    </span>
    <p>詳しく見る</p>
    <a href="">詳細ページへ</a>
  </li>

【CSS】※余計なCSSプロパティは割愛

  ul li{
    position: relative;
}
  ul li a{
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    text-indent: 100%; /*テキスト非表示*/
    white-space: nowrap; /*テキスト非表示*/
    overflow: hidden; /*テキスト非表示*/
  }
  ul li a:hover{
        opacity:0.6;
        filter: alpha(opacity=60);
        -ms-filter: "alpha( opacity=60 )";
        background: #fff;
  }

これで、ボックス内が全部リンク領域にする事ができます。

DEMO