現在では、divなどのブロック要素をaタグで括っても問題はありませんが、以前の仕様（HTML5未満）では非推奨でjQueryを使ってブロック全体にリンクが有効になるようにしていました。
今も感覚的にインライン要素の中にブロック要素を入れるのは、気持ちが悪いという方もいらっしゃるのではないでしょうか。
そんな方には、jQueryを使わずCSSのみで実装できるクリック範囲を親要素全体に広げる方法をお勧めします！
CSSの疑似要素（:before、:after）を使った方法ですが、既に何らかのstyleを設定してある場合はご注意ください。

ソースは下記のようなシンプルな感じです。

<div class="wakusen">
すぐに、手軽に、低価格で。ホームページパックプラン
<a href="/service/hp/plan">詳細はこちら</a>
</div>

ここに以下のCSSを適応させます。

div.wakusen {
    position: relative;
    overflow: hidden;
}
div.wakusen > a:before{
    content:"";
    position: absolute;
    width:100vw;
    height:100vh;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    left:50%;
    top:50%;
}

そうすると、どうなるか
以下を確認ご確認ください。
見た目は変わらないですが、マウスオーバーするとクリック範囲を親要素全体に広がっているのが分かると思います。

※二つ以上のリンクだと不具合がでてくるので、ご注意ください。
簡単に解説するとaタグの疑似要素を親要素全体に効かせた形になります。
疑似要素なので　:hover　などの要素を加えることもできるので、マウスオーバーで親要素全体全体を薄くすることも出来ます。

今ではあまりメリットのない方法ですが、
インライン要素の中にブロック要素を入れるのが気持ちが悪いという方は、この方法で設定してみてはいかがでしょう。
ちょっとしたご相談事などでもお気軽にお問い合わせください。