HTML5で再定義された要素と属性
ここが違う！サンプルで見るHTML5（3）

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属性によるページ内アンカー

<a name="chapter01"></a><h2>第1章</h2>

　HTML5ではa要素のname属性が廃止になりました。そのため、アンカーをa要素を使ってマークアップすることはできません。HTML5では、id属性によってアンカーを定義します。id属性はグローバル属性の1つなので、HTML5で規定された全ての要素で利用可能です。つまり、どの要素もid属性によってアンカーとして定義できます。

HTML5でのアンカー

<h2 id="chapter01">第1章</h2>

　このアンカーは、Internet Explorer 6といった古いブラウザーでも期待通りに機能します。

　以上、用途が変更された要素について解説してきましたが、旧来からある要素も含めて、改めて理解することの重要性がお分かり頂けたら幸いです。次回は、HTML5でも注目度が高いマルチメディア関連の要素について解説します。