レイアウト要素の変更点
HTML 5には、Firefox 3.5に搭載予定のメディア要素のほかに、ページ上に構造または区画を設けるための新しい要素が数多く取り入れられています。
<article>と<section>
<article>タグは、Webページ上のメインストーリーなどの記事コンテンツを扱うためのコンテナの役割を果たします。同様に、<section>タグは記事をセクションに細分して、そのコンテンツを識別しやすくします。これらの中で使われる見出しタグ（<h1>、<h2>など）は、ヘッダータイトルをはっきり区別して、各セクションの重要度を示す働きをします。
オリジナルのHTML仕様に見られる2つの大きな失策は、セクションについての正式な格納モデルがないこと（コンテンツを単なる直線的な話の流れと見なし、時々見出しを入れるだけで、セクション内のセクションとしては扱わないこと）と、<title>要素が<head>要素の中でページ自体のタイトルとして早々と予約されてしまうことです。
このうちの2番目の失策による結果、ジェネリックな<title>要素をセクション、画像、テーブルなどの構造ラベルとして使用することはできなくなりました。それと同時に、ドキュメントのタイトルとそのドキュメントの本文（記事）のタイトルとの間に直接的な1対1関係が成立しなくなりました。現在のところ、これを変更する実質的な方法はありません。<title>がWebのフレームワークにあまりにも緊密に組み込まれているので、その定義を変更することができないのです。
しかし、<article>および<section>グループを使用すると、HTMLドキュメントはDocBookによく似た形を取るようになります。しかも、こうした格納構造は次のような利点をもたらします。
- 意味のある目次の自動生成がはるかに容易になる
- 意味のあるやり方でコンテンツをレイアウトしやすくなる
- Webページに後で下位のコンテンツを挿入する作業が効率的になる（ページ全体ではなく記事のみを入れるだけでよい）
<hgroup>
HTML 5には<hgroup>要素があり、ここに<h1>や<h2>といった下位の要素を含めることができます。これにより、レイアウトに関する厄介な問題が少なくとも1つは好転します。すなわち、意味論的に一貫性のある方法で、ドキュメントの中のいろいろなレベルにサブタイトルを作成できるようになるのです。例えば、次の例を見てください。
<article>
<hgroup>
<h1>An Overview of HTML 5</h1>
<h2>Looking at Spec Changes</h2>
</hgroup>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<section>
<hgroup>
<h1>Tags</h1>
<h2>Laying out the markup</h2>
</hgroup>
<p>This is the subsection P1</p>
...
</section>
</article>
このマークアップ中のh1タグは、ドキュメントレベルの1タグではなく、そのコンテナ（例えば記事やセクション）の範囲に関連付けられた何物かを表しています。<hgroup>を使用すると、目次の作成も楽になります。HTMLは単なるブラウザ表示以外の目的にも広く使われるようになっているため、このような変更のおかげで、印刷やその他のメディア組織にとっても扱いやすさが向上すると思われます。
<aside>
<aside>要素はインラインのサイドバーや関連コンテンツを設定するためのものです。雑誌では、短い記事が大きな記事のコンテキストに含まれることがよくあります。例えば、HTML 5のレビューでは、関連タグの概略説明がメイン記事の上や下に浮動ブロックとして表示されることがあります。これをWeb上で実現することは可能ですが、簡単な技術ではないので、CSSの専門家に頼んで、組織の大きなスタイルシートの一部として実装してもらうのが一般的でした。<aside>要素は同じ機能を果たしますが、ブラウザでデフォルトのスタイル設定を設けることが可能になるので、CSSでのサポートの詳細を知らなくても意味的に考えて使用できます。
<nav>
<nav>要素は<aside>と同じような目的で使われます。大抵のページでは、ナビゲーション要素と主コンテンツとの間に明確な線を引きます。ページ内に1つ以上の<nav>要素を記述することで、ナビゲーション要素とコンテンツとの区別がはっきりします。<aside>と同様、<nav>の役割は外観よりも意味的な部分にあり、<nav>内のコンテンツの目的を明確にします。これにより、CSSがなくても、ブラウザがこのコンテンツをまとまりのあるやり方でレイアウトすることが可能になります。
<header>と<footer>
<header>要素と<footer>要素はページレベルの補助的な構成要素として使われます。ヘッダーコンテンツはページの最上部に表示され、フッターコンテンツはページの最下部に表示されます。HTMLドキュメントの印刷時には、どちらもページごとに繰り返されることになります。
通常、ヘッダーコンテンツにはWebサイトのバナーと関連するコンテンツが含まれ、menu要素やnav要素も含まれることがあります。それに対し、<footer>要素は通常はページの最下部に配置され（ただし、記事やセクションの最下部に配置されることもあります）、ここには法的な決まり文句、ページや電子メールへのリンク、関連する連絡コンテンツなどが含まれます。
<menu>
HTML 5には非常に多くのナビゲーション構造がありますが、その中で<menu>要素は最も重要なものの1つでしょう。抽象的に捉えれば、メニューとはコマンドの連なりです。実際的には、メニューは次の3種類のいずれかに分類される視覚的な構造として実現されます。
- コンテキストメニュー－そのページのコンテキストメニューを置き換える形で表示されるメニュー項目です。コンテキストメニュー内のコマンドを使用できるのは、ユーザーがコンテキストメニューシーケンスを開始したとき（一般にはページ上で右クリックまたはoptionキーを押しながらクリックしたとき）だけです。
- ツールバー－ツールバーメニューがインスタンス化されると、ツールバーがまだ存在しなければ新たに作成され、そのツールバー上にメニューが構築されます。メニューの順番は定義された順序に従います。
- リスト－リスト項目は、単純に
<li>タグを使ったリストとして列挙されるか、他の要素を使ってインラインで記述されます。CSSを使ってカスタムメニュー形式を作成するときによく使われます。
これらのメニューでは、<li>要素を使って個々のエントリを定義し、<command>、<a>、<button>などの関連するコマンド対応要素で実際のアクションを設定します。例えば、ブログの編集を処理するためのコンテキストメニューを作成するのであれば、次のようなものを記述することになるでしょう。
<menu type="context>
<li><command label="Clear Record" action="this.clear()"/></li>
<li><command label="Submit Record" action="this.submit('submission-agent')"/></li>
<hr/> <!-- this creates a break --></hr>
<li><command label="Search Records" action="this.search('submission-agent')"/></li>
</menu>
大体想像がつくと思いますが、メニューは非常に複雑になりがちです。しかも、メニューの仕様は他の大部分のナビゲーション要素に比べて十分に確立されているとは言えません。
