ヘッダーとフッター
要素headerとfooterを使用して、ヘッダーとフッターを定義できます。ヘッダーを定義するためには、head要素を使用します。なお、これは必ずしもページ全体のヘッダーである必要はありません。同様に、headを使用してセクションや記事のヘッダーを定義することもできます。
注意：ヘッダー要素headerを、HTMLドキュメント内のタイトルやスタイルシートおよびJavaScriptの呼び出しを含むHTML文書のヘッダー領域を定義する有名なhead要素と混同しないようにしてください。
全文書でheaderを使用する場合の例:
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>section要素に適用すると、以下の例のようになります:
<section>
<header>
<h1> Web-Apps erstellen (Teil 09): jQuery mobile (1)</h1>
<p> jQuery ist zweifellos eines der bekanntesten JavaScript-Frameworks.</p>
</header>
<p>
「クラシックな」ウェブサイトではjQueryがすでに何千回も使用されています。Webアプリケーション向けに特に設計された姉妹フレームワークjQuery mobile（jQM）があります。このフレームワークは、あなたのWebアプリケーションを瞬時に本物のアプリケーションのように見せるのに役立ちます。jQMについて詳しく見てみる価値があります。
</p>
<footer>
<p>Copyright by PSD-Tutorials.de</p>
</footer>
</section>footerとheaderには追加のheaderおよびfooter要素を含めることができないことに注意してください。
見出しのグループ化
セクションに関連する見出しが登場します。これらの見出しは、最初には従来のh1からh6までの要素かもしれませんが、HTML5ではhgroup要素も認められています。これらの要素内には複数の見出しが含まれることもあります。
まずは、"通常"の構造をhx要素を使用して定義した典型的なHTML文書を見てみましょう。
<h1>
Buch
</h1>
<h2>
Kapitel 1
</h2>
<h2>
Kapitel 2
</h2>
<h3>
Unterkapitel 2.1
</h3>
<h3>
Unterkapitel 2.2
</h3>
<h2>
Kapitel 3
</h2>
この定義により次の構造が得られます:
Buch
Kapitel 1
Kapitel 2
Unterkapitel 2.1
Unterkapitel 2.2
Kapitel 3
ただし、ブラウザでは見出しはインデントされません。
hgroupは特にジャーナリズムのテキストと関連して興味深いです。これらは通常、ヘッドラインとサブヘッドラインから構成される2つの部分で構成されます。例を見てみましょう。
<hgroup> <h1>Cloud OS</h1> <h2>Das Web als Betriebssystem</h2> </hgroup> <p>Hier beginnt der Inhalt des Artikels …</p>
この例から明らかなように、サブヘッドラインは記事内の独自のセクションを切り開くものではありません。むしろ、これは記事の一部の見出しです。このようなことはhgroup要素を使用して簡潔にまとめることができます。
hgroup内ではh1からh6までの要素が許可されています。
アウトラインコンセプト
さらに、HTML5ではsection要素と複数のhx要素が連携するアウトラインコンセプトが登場します。このコンセプトでは、従来のようにh1からh6の要素によって見出しが異なるレベルに分割されます。ここでh1が最上位レベルに相当し、h6が最低レベルを表します。したがって、これまでと同様に、hx要素はsection要素内で定義できるようになります。そして、それぞれの段階でレベルが一段階深くなります。
アウトラインコンセプトはHTML5仕様でかなり複雑に見えますが、その背後にある考え方は非常にシンプルです。実際には、文書構造を機械可読にする目次を定義することができます。
こちらも例をご覧ください:
<h1>
Kapitel 1
</h1>
<section>
<h1>
Kapitel 2
</h1>
<section>
<h1>
Kapitel 3
</h1>
</section>
</section>
HTML5のアウトラインコンセプトにより、次の構造が得られます：
1. Kapitel 1
- Kapitel 2
- Kapitel 3
- Kapitel 3
別の例を示すと、効果が明確になります。ここでもまずは元のドキュメントを示します。
<section>
<h1>Installation und Konfiguration</h1>
<section>
<h2>Installation</h2>
<p>Alles rund ums Thema Installation
</section> <section>
<h2>Konfiguration</h2>
<p>Hier findet ihr alles zum Thema Konfiguration
</section>
<aside>
<p>Interessante Bücher zum Thema...
</aside>
</section>
<footer>
<p>(c) by PSD-Tutorials.de
</footer>
</section>
その結果得られる構造は以下のようになります：
1. Section (Installation und Konfiguration)
1.1 Section (Installation)
1.2 Section (Konfiguration)
1.3 Section (aside)
- Section (footer)
さらに別の例:
<body>
<h1>Installation und Konfiguration</h1>
<h2>Installation</h2>
<p>Alles zum Theme Installation
...noch mehr Inhalt...
<section>
<h3>Voraussetzungen</h3>
<p>Alles zum Thema Installationsvoraussetzungen
...noch mehr Inhalt...
<h3>Vorbereitungen</h3>
<p>Alles zum Thema Vorbereitungen
...noch mehr Inhalt...
<h2>Konfiguration</h2>
<p>Alles zum Thema Konfiguration
...noch mehr Inhalt...
</section>
</body>
結果の構造は次のようになります：
1. Installation und Konfiguration
1.1 Installation
1.1.1 Voraussetzungen
1.1.2 Vorbereitungen
1.2 Konfiguration
内部のナンバリングは、ここでは毎回1から始まります。アウトラインコンセプトが影響を受ける要素は次の要素だけです：
• article
• aside
• nav
• section
一方で、headerとfooterは除外されます。
HTMLアウトライン構想は現在ブラウザに未対応ですのでご注意ください。
しかしながら、ブラウザメーカーが対応するのは時間の問題でしょう。アウトライン構想の利点は大きいです。自動生成されたナビゲーションメニューなどを考えてみてください。しかし、現在ブラウザでこの形式の構造化が無視されているとしても、今すぐにでもドキュメントを論理的に構造化するよう努めるべきです。それにより、ウェブサイトに将来的な安定性をもたらすことができます。
