HTML 5 の新要素

HTML 5 は，現在W3Cで策定中の段階にあります。Web上に公開されている情報も「草案（Working Draft）」で，今後変更される箇所も出てくると思います。

さて，その HTML 5 で新たに追加される「構造を示すための要素」をいくつか紹介してみましょう。

• HTML 5 における HTML 4 からの変更点：3.1. 新しい要素 より

文書のより良い構造化のため、次の要素が新しく追加されました。

section

要素は文書やアプリケーションにおける一般的なセクションを表します。h1-h6 と共に用いることで、文書構造を示唆することができます。

article

要素は blog エントリや新聞記事など、文書の中で独立した一片の内容を表します。

aside

要素はページのほかの部分とわずかにのみ関係する一片の内容を表します。

header

要素はヘッダにあたるセクションを表します。

footer

要素はフッタにあたるセクションを表します。フッタには作者に関する情報、著作権に関する情報などを含むことができます。

nav

要素はナビゲーションを目的とした、一つのセクションを表します。

... 略 ...

HTML 5 で新たに追加される要素については以下も参考になると思います。

• HTML 5 の新要素

同じ要素でも，どこにあるかによって意味合いが違ってくる

たとえば，サイドナビにある<h2>Navigation</h2>という見出しと，メインとなる文書の中にある<h2>Navigation</h2>という見出しは，その役割や重みが違ってきます。サイドナビにあるほうは「ここがナビゲーションですよ」という意味で，この後に，各ページへのリンクなどが並ぶことになります。メインの文書にあるほうは「ナビゲーションについて書きますよ」という意味で，この後にナビゲーションについての説明なり論考なりが書かれることになります。

見出しだけでなく，strongやem，ulやdlといったリストも，サイドナビにあるものと，メインの文書にあるものとでは意味合いが違ってくるでしょう。

aside，articleという要素を使うことによって，こうした違いをはっきりと示すことができます。

構造を明確にしたマークアップが果たす目的

検索をするような場合，article要素の中に「Navigation」というキーワードがあったほうが，asideにあるときよりも，より「Navigation」について詳しく書かれていると予想できるでしょう。

article要素の中にあるheading（見出し）要素や，storong，em要素を抽出して，そのページの内容を示すということもできるでしょう。

XHTML の Role属性や HTML 5 のこうした新要素を使うことによって，ノイズ（本来必要でない情報）をできるだけ除去してページの内容を解析・処理できるようになるでしょう。余計な情報で探しづらくなったり，判断しにくくなったりといったことも少なくなります。

構造をきちんと表現したマークアップは，快適に，便利にWebを活用できる環境を作っていくことになります。

id，classの命名の参考に

各ブラウザの HTML 5 への完全な対応は，しばらく先になると思いますが，現在，id や class の命名でお悩みの方は，XHTML の Role属性とあわせ，これらの新要素を参考にするのもよいかもしれません。