html リンク範囲を文字だけでなくブロック全体に広げる方法

divタグやpタグにaタグを貼るのはNG

ブロック要素をインライン要素で囲むことはできない

htmlには「ブロック要素」と「インライン要素」があります。 ブロック要素が親で、インライン要素が子、というイメージで、親の中に子が入る要領でブロック要素の中にインライン要素が入るようになっています。リンクタグはインライン要素ですのでインライン要素に振られるのが一般的です。ですので、ブロック要素にリンクタグを振るためにはブロック要素をインライン要素で囲まなければならないという理屈になります。しかし、ブロック要素をインライン要素で囲むことは推奨されていません。

物理的に絶対にできない！ということはないのですが、コーディングのルール上できない事になっています。
好奇心から実際に囲んでみたことがありますが、うまく挙動しませんでした。

• ブロック要素をインライン要素で囲むことはできない

という決まりなのです。

aタグを「ブロック要素」にした上で範囲を広げる

そこでまずはaタグを「ブロック要素」にしてあげる必要があります。

まとめ