HTML5 以降では、インライン要素とブロック要素の区別がなくなったことで、［a 要素］で［div 要素］を囲うことが可能になっています。
しかし HTML5 未満では非推奨。
そこで、jQuery を利用して、特定の［div 要素］の中にある［a 要素］を探し、親要素の［div 要素］全体をリンクとして機能させる方法を紹介します。

やり方は簡単で、とても短いコードで実装できます。

まずは本家の［jQuery.js］を読み込み、その後で以下のコードを記述します。

<script>
$('div.link').click(function() {
location.href = $(this).find('a').attr('href');
});
</script>

このコードで、［class="link"］が指定された［div 要素］内から［a 要素］を捜して、［attr］で［href］の情報を取り出してリンク先に飛ばすことが可能になっています。

例として以下のような HTML を記述すると…

<div class="link">
<h3>ボックス全体がリンクとして機能します。</h3>
<p>このボックス全体がクリックできるようになっています。</p>
<p>リンクは<a href="sample.php">ココ</a>だけではありません。</p>
</div>

紹介した通り、見事にボックス全体がリンクとして機能していることを確認できるでしょう。