pagetaka

写真、PC、ネット、岡山、旅の話題をお届けします

HTML5:ブロックレベル要素(タグ)にリンクを設定する

HTML5で、ブロックレベルの要素、例えば「div」「p」にもリンクを設定することができるようになりました。HTML4.01までは、「a」を使いインライン要素にリンクを貼るという作業でした。

上がHTML4.01、下がHTML5です。

<p><a href="http://www.google.co.jp/">Google</a></p>
<a href="http://www.google.co.jp/"><p>Google</p></a>

小さな変化に見えますが、なかなかどうして、リンクに対するとらえ方が大変革を起こした、とTAKAには見えます。HTMLのブロック要素、インライン要素の区別ができることが技術的には入口になりそうですね。

↓実際の表示:HTML4.01では文字の範疇にリンクの手が出現(これまで通り)。HTML5ではブロック要素であることから、(およそ)一行分がリンクとして生きています。便宜上、範囲を示すため、Pタグに背景色を付けました。

div要素を対象にすれば、これまでクリッカブルマップなどを使っていたリンク方法をある程度簡単にすることも考えられます。

[追記:6/15]HTML5では「ブロックレベル要素」というような表し方があるかないか、はて? ひとまず、HTML4の知識を引きずって考えるとき、というような前提でよろしくお願いします。