html5では、インライン要素とブロックレベル要素の分類がなくなり、
html4以前でインライン要素であった要素内に、ブロック要素を入れられるようになったそうで。
あまり機会はないと思いますが、コンテンツ全体をaタグで囲い、その中にaタグを配置したい場合などに使う。
普通に実装してみる
何も考えず、aタグの中にaタグを書いて実装しようとすると以下のように書く。
<div>
<a href="#">
<span>aタグ</span>
<div>
<a href="#"><span>aタグ内のaタグ</span></a>
</div>
</a>
</div>
上記だと、ブラウザでhtmlをパースされた後は、aタグの閉じ位置を補完してくれるので、
以下のような意図していない形に書き換えられてしまう。
<div>
<a href="#">
<span>aタグ</span>
</a>
<div>
<a href="#"></a>
<a href="#"><span>aタグ内のaタグ</span></a>
</div>
</div>
objectタグで囲む
aタグ内のaタグは、objectタグで囲うと正しくパースされる。
<div>
<a href="#">
<span>aタグ</span>
<div>
<object><a href="#"><span>aタグ内のaタグ</span></a></object>
</div>
</a>
</div>
注意
HTML5タグリファレンス、objectの項目を引用すると、
<object>タグは、文書に外部リソースを埋め込む際に使用します。
<object>－HTML5タグリファレンス
のように、外部リソースを埋め込む際に使用するとなっているため、レイアウトを実現するためだけなら、と勝手に許容する。