続HTML5についてのおさらい

W3G
Blog

Updated 2013.09.05 / Published 2010.08.19

HTML5についてのおさらい続編です。前回の内容を受けて読者の方から質問があったことに対する回答のまとめであったり、前回紹介しきれなかったセクション関連の新要素として見出しをグループ化するhgroup要素による効果、およびheader, footer要素を用いたセクションといった前回から一歩踏み込んだ内容をまとめました。

前回のHTML5についてのおさらいの前提を含みます。先に参照しておくとより理解が進むかと思います。また、今回取り上げている要素はコンテンツ・モデルも関係してくるのでこの点も抑えておく必要があります。

hgroup要素 - 見出しのグループ化

hgroup要素は、HTML5の勧告候補から除外されました。各ブラウザは互換性のためにhgroup要素のサポートをいますぐやめるわけではありません。hgroup要素を取り入れている場合は、該当部分を修正してください。
hgroup要素は、複数の見出しをグループ化します。hgroup要素の中に入れることができるのはh1要素からh6要素までの見出しのみです。見出しのグループ化によって得られる効果は、副題やキャッチフレーズを伴う場合に意味的・構造的にそれを一つの見出しとして構成することができることと、加えて無駄なアウトラインの形成を抑止できることです。

<body> <h1>A</h1> <h2>A'</h2> <h2>B</h2> <p>C</p> </body>

上記のHTML5ドキュメントであれば、HTML5適合UAは暗黙のセクションに基づいて次のアウトライン（階層構造）を形成します。

A...bodyセクションの見出し(レベルはh1)

A'...暗黙のセクションを開始する見出し(レベルはh2)

B...暗黙のセクションを開始する見出し(レベルはh2)で、段落のCを含んでいる

もし、制作者が意図的にA'の見出しをAの見出しの副題やキャッチフレーズとして含めたくても従来のマークアップではアウトラインが生成されてしまい、構造的にもわかれてしまう問題がありました。そこでhgroup要素を利用することで、従来のマークアップが抱えていた問題を解決することができます。

<body> <hgroup> <h1>A</h1> <h2>A'</h2> </hgroup> <h2>B</h2> <p>C</p> </body>

hgroup要素を用いることにより、HTML5適合UAにおける上記のHTML5ドキュメントのアウトライン（階層構造）は次のように形成されます。

A+A'...bodyセクションの見出し(レベルはh1)

B...暗黙のセクションを開始する見出し(レベルはh2)で、段落のCを含んでいる

hgroup要素内にある複数の見出しはグループ化が行われ、その見出しのレベルは複数の見出しの中で、もっとも高いレベルに準じ、意味的にも1つの見出しとして構成されます。そして、形成されるアウトラインも見出し1つ分であることがhgroup要素のもっとも注目すべき点です。

なお、ここでは説明にあたって便宜上わかりやすくするために暗黙のセクションを用いましたが、マークアップの際は暗黙のセクションに依存するのではなく、次のように必ずセクショニング・コンテンツ(article, aside, nav, section要素)を用いるようにしましょう。形成されるアウトライン（階層構造）は同じです。

<body> <hgroup> <h1>A</h1> <h2>A'</h2> </hgroup> <section> <h2>B</h2> <p>C</p> </section> </body>

header要素 - ページ全体のヘッダと各セクションのヘッダ

header要素は導入部分（コンテンツの概略や目次）、ナビゲーションなどをグループ化して提供するために使います。header要素内に、header要素とfooter要素を入れることはできません。header要素はセクションの一部であって、新しいセクションを開始するものでもなければ、アウトラインにも影響を及ぼしません。そして、bodyセクション内で使うか、各セクション内で使うかによって、それぞれ違った役割を果たすケースが多いはずです。

ページ全体のヘッダ(ページ・ヘッダ)

bodyセクション内でheader要素を使う場合は、サイト名称やロゴ、主要なナビゲーション、サイト内検索フォームなどをグループ化した典型的なヘッダとして提供することが一般的です。これは多くの制作者が従来使ってきた<div id="header">...</div>に置き換わるものであると考えるとわかりやすいかもしれません。

<body>
<header>
<hgroup>
<h1>サイト名</h1>
<h2>サブタイトル</h2>
</hgroup>
    <nav>
    <ul>
    <li><a href="/contents1/">主コンテンツその1</a></li>
    <li><a href="/contents2/">主コンテンツその2</a></li>
    <li><a href="/contents3/">主コンテンツその3</a></li>
    </ul>
    </nav>
</header>
...
</body>

各セクションのヘッダ

各セクションのヘッダとは、暗黙のセクション、またはセクショニング・コンテンツによって生成されたセクションの中で使われるheader要素を言います。ページ・ヘッダはサイト全体に関するナビゲーションをグループ化して提供するために使用されるケースが多いのに対し、各セクションのヘッダはセクション内のコンテンツについての概略（見出しと概要）や目次といった、そのコンテンツの導入部分を提供するために使用するケースが多くなるでしょう。たとえば、次のようにarticle要素のセクション内で本文の導入部分として提供するような使い方です。

<body>
...
    <article>
    <header>
    <h2>続HTML5についてのおさらい</h2>
    <p>TML5についてのおさらい続編です。前回の内容を受けて...</p>
    </header>
...
    </article>
...
</body>

footer要素 - ページ全体のフッタと各セクションのフッタ

footer要素はそのセクションに関する情報をグループ化して提供するために使用します。header要素と使用ケースが似ているため説明がやや冗長ですが、文法等はheader要素と同様で、footer要素内にheader要素とfooter要素を入れることができず、新しいセクションを開始するものでもなければ、アウトラインにも影響を及ぼしません。また、bodyセクション内で使うか、各セクション内で使うかによって、こちらもそれぞれ違った役割を果たすケースが多いはずです。

ページ全体のフッタ(ページ・フッタ)

bodyセクション内でfooter要素を使う場合は、サイトそのものに関するナビゲーションや著作権表記などをグループ化した典型的なフッタとして提供することが一般的です。もちろん、これは多くの制作者が従来使ってきた<div id="footer">...</div>に置き換わるものであると考えるとわかりやすいでしょう。

<body>
...
<footer>
<ul>
<li><a href="/sitepolicy/">サイトポリシー</a></li>
<li><a href="/privacy/">個人情報の取り扱いについて</a></li>
<li><a href="/sitemap/">サイトマップ</a></li>
</ul>
<small>Copyright ---. All right reserved.</small>
</footer>
</body>

各セクションのフッタ

各セクションのフッタとは、暗黙のセクション、またはセクショニング・コンテンツによって生成されたセクションの中で使われるfooter要素を言います。フッタと言っても必ずしもセクションの最後で使わなければいけないわけではなく、セクションの頭でも途中でも使用することができます。

各セクションのフッタは、主にarticle要素のセクション内で記事が誰によっていつ作成され、またいつ更新されたのかといった情報のグループ化であったり、本文の補足情報のグループ化、関連リンクのグループ化、ブログのコメントのグループ化などに使用されるケースが考えられます。

もしセクショニング・コンテンツの使い方で迷ったら?

質問の多かったところで、セクショニング・コンテンツであるarticle, aside, nav, section要素のいずれでマークアップするのが良いのか使い分けに迷うような場合は、次のように意味がわかりやすいものから順に当てはめていくことで、必ずしも適当ではありませんが、どのセクショニング・コンテンツでマークアップするのが良いのかの手引きにはできるかもしれません。

手順1. ナビゲーションかどうか

マークアップしようとしている内容がナビゲーションであれば、nav要素を使います。ただし、ページ内に以降同じナビゲーションが登場する場合は先に登場する方にだけnav要素を使います。内容がナビゲーションでない場合は次の手順へ移ります。

手順2. 自己完結された内容かどうか

その内容がそれ単独でコンテンツとして成り立つのであれば、article要素を使います。ただし、RSS等のフィードで提供する内容に相応しかどうかを基準とします。内容が単独で成り立つものではなかったり、成り立つものであってもフィードとして提供するのに相応しくない場合は次の手順へ移ります。

手順3. なくなってもページとして成り立つかどうか

その内容がなくなってもページ、またはメインコンテンツとして成り立つのであれば、aside要素を使います。その内容がなくなってしまうとページ、またはメインコンテンツが成り立たなくなるような場合は次の手順へ移ります。

手順4. 自然に見出しを含められるかどうか

その内容に自然に見出しを伴うことができるのであれば、section要素を使います。自然に見出しを入れられない（見出しを伴えない）ような内容の場合は、セクショニング・コンテンツ以外の要素でマークアップするのが相応しいということになります。

strong, em, b, i, mark要素の使い分け

これまでのセクションについての内容から話が大きくそれてしまいますが、読者の方から質問があったことに対する、一見解としてあわせてここに記載しておくことにします。

XHTML1.1でプレゼンテーションモジュールに分類されていた要素は、本来XHTML2.0からは削除予定であったのに対し、HTML5からb要素, i要素が削除されずに残っていることから、strong, em, b, i要素、加えて新たなmark要素をそれぞれ必要以上に使い分けなければならないのではないかと混乱される方が多いようです。

HTML5では、これらの要素における定義は明確にわけられており、strong要素とem要素の使い分けはわかりやすくなったかと思うのですが、i要素とb要素については使い分ける必要も、また無理に使う必要もない要素であると考えます。

strong要素

従来strong要素に与えられてきた論理的な意味は「強い強調」であり、強調と重要性どちらの意味でも利用可能でしたが、HTML5では強調の意味が失われ、「重要性」のみを表す要素に変更されました。また、その重要性の度合いはstrong要素自身の入れ子関係によって表すことができます。たとえば、次のサンプルは注意喚起したい場合で、注意喚起のフレーズの中でも特に訴えたい何故なのかの部分を入れ子にしてあります。

<h1><strong>まぜるな<strong>危険</strong></strong></h1>
<p><strong>酸性タイプ</strong>の製品と一緒に使う（まぜる）と有毒な塩素ガスが出て<strong>危険</strong>です。</p>

em要素

従来em要素に与えられてきた論理的な意味は「強調」であり、strong要素と同様で強調と重要性どちらの意味でも利用可能でしたが、HTML5ではstrong要素とは逆に重要性の意味が失われ、強調のみを表す要素に変更されました。その強調の度合いはem要素自身の入れ子関係で表すことができます。音声環境においては、em要素でマークされた部分は強勢として働き、他の音節よりも呼気エネルギーを大きくして、読み上げられることが期待されます。たとえば、次のサンプルは強勢としてトーンを強めたい部分における使用例で、さらにトーンを強めたい部分を入れ子にしてあります。

<p>魚が<em>好き<em>です。でも、<em>お肉は<em>もっと好き</em>です。</em></p>

i要素

従来のi要素はテキストを視覚的にイタリック体、または斜体で表示させることのみを目的とした物理要素でしかありませんでしたが、HTML5では声やムード、分類用語、技術用語、外国語の慣用句、思考、船の名前といった印刷表現において一般的にイタリック体で表記されるべきテキストを区別するために用いられます。しかしながら、ここで上げられている対象例は、一般的な日本語のサイトにおいてはほとんど使いどころがなく、また他に相応しい要素がない場合にのみi要素を使うことが推奨されていることからも、日本語のサイトにおいてはi要素は使い分ける必要も無理に使う必要もない要素と考えて良いでしょう。

b要素

従来のb要素はテキストを視覚的にボールド（太字）で表示させることのみを目的とした物理要素でしかありませんでしたが、HTML5では印刷表現において一般的にボールド（太字）で表記されるべきテキストを区別するために用いられます。i要素のような具体的な用例が設けられておらず、加えてb要素は他に相応しい要素がない場合に、他のテキストと区別したい場合の最後の手段として用いることになっているので、i要素よりもより一層、使い分ける必要も無理に使う必要もない要素と考えて良いでしょう。

mark要素

mark要素はHTML5から新たに加えられた要素で、重要性でも強調性の意味をもたせるでもなく、他の文章から参照されることを目的に印付けるために使用します。たとえば、サイト内検索機能の検索結果で検索キーワードがスニペット内に含められている場合に該当キーワード部分をハイライトさせるために用いたり、引用文の中で言及したい部分に対して注目を引くために用いたり、コンピューターのプログラムコードの例示において読者に注目してほしい部分として印付けるために用いる等の利用シーンが考えらます。

以上、最後がマークアップについての見解コーナのようになってしまいましたが、HTML5のマークアップに関するおさらいはこれにて一段落とします。ご購読どうもありがとうございました。