aタグでdivを囲んでみた

2020年3月13日

HTML4では<a>タグはインライン要素であるため、
ブロックレベル要素を含めることができず、
ブロック全体をリンクするには、それこそ
JavaScriptを使って実装？していましたが、

HTML5では、
インライン要素とブロックレベル要素の
分類が廃止され、
<a>タグの中に<div>タグなどの
ブロックレベル要素を含めてもOKになりました。

HTML4.01ではa要素はインライン要素であったため、ブロックレベル要素全体をリンクを指定することはできませんでした。 例えば、段落全体を～で囲んでリンクするような指定方法は認められていませんでした。

HTML5では、インライン要素とブロックレベル要素の分類は廃止されており、 段落・リスト・表などのセクションに対しても、全体を～で囲んでリンクを指定できるようになっています。 ただし、その中に他のリンクやフォームボタンなどのインタラクティブコンテンツが含まれる場合には、リンクを指定することはできません。

ハイパーリンクを指定する

<a href="#">
  <div>
    <h1>吾輩は猫である</h1>
    <p>吾輩は猫である。名前はまだない。どこで...</p>
    <p class="more">Learn More &raquo;</p>
  </div>
</a>