a要素のアップデート
HTML5では、ウェブページでは必ずといっても良いほどよく使われるa要素についても、いくつか変更された点があります。ウェブ製作の現場で最も関係する変更点は、a要素に入れることができる要素が変更された点と、ページ内アンカーのマークアップ方法でしょう。ここでは、その変更点の詳細を見ていきましょう。
ブロック要素をハイパーリンクに
旧来のHTMLでは、a要素の中にはインライン要素しか入れることができませんでした。しかし、HTML5ではその制約が無くなり、ブロック要素をa要素の中に入れることができるようになりました。
<a href="http://example.jp/">
<aside>
<h3>広告</h3>
<p>○○○○○○○○○○○</p>
</aside>
</a>
旧来のHTMLでは、a要素の中にh3やp要素を入れることはできません。しかし、HTML5では、さまざまなコンテンツをまとめて特定のページへリンクさせることが可能となりました。
とはいえ、あらゆる要素をa要素の中に入れて良いわけではありません。a要素に入れることができない要素があります。それは、インタラクティブ・コンテンツと呼ばれるカテゴリーに属する要素です。インタラクティブ・コンテンツに属する要素は以下の通りです。
a要素、audio要素（controls属性が存在する場合）、button要素、details要素、embed要素、iframe要素、img要素（usemap属性が存在する場合）、input要素（type属性がhidden以外の場合）、keygen要素、label要素、menu要素（type属性がtoolbarの場合）、object要素（usemap属性が存在する場合）、select要素、textarea要素、video要素（controls属性が存在する場合）
分かりやすく言うと、マウス・クリックなどのユーザーの操作を伴う要素は、a要素の中に入れることができません。
ページ内のアンカー
旧来のHTMLでは、ページ内のアンカーとしてa要素がよく使われてきました。
<a name="chapter01"></a><h2>第1章</h2>
HTML5ではa要素のname属性が廃止になりました。そのため、アンカーをa要素を使ってマークアップすることはできません。HTML5では、id属性によってアンカーを定義します。id属性はグローバル属性の1つなので、HTML5で規定された全ての要素で利用可能です。つまり、どの要素もid属性によってアンカーとして定義できます。
<h2 id="chapter01">第1章</h2>
このアンカーは、Internet Explorer 6といった古いブラウザーでも期待通りに機能します。
以上、用途が変更された要素について解説してきましたが、旧来からある要素も含めて、改めて理解することの重要性がお分かり頂けたら幸いです。次回は、HTML5でも注目度が高いマルチメディア関連の要素について解説します。
