これまではインラインレベル要素とブロックレベル要素といった大まかな定義でしたが、細かくなりました。
HTML5の内容モデルは「なんとかcontent」ってついてます。
- Metadata content
- Flow content
- Sectioning content
- Heading content
- Phrasing content
- Embedded content
- Interactive content
ブロックレベル要素という概念がほぼ消失しました。いちおうFlow contentといえばそうですが、Flow contentにはインラインレベルなものやプレーンテキストも入るので、違います。
そういう用語は仕様書にはないです。オレオレ定義です。次の要素を指します。
- header
- footer
- figure
- section
- nav
- article
- aside
他にも色々あるといえばありますが、制作で使いそうなものに絞ってます。
太字にしたsection, article, nav, aside は sectioning content という特別な要素です。別に解説します。
header要素はいわゆる「ヘッダ」です。主にふたつの役割があります。
- #headerなど、レイアウト的なヘッダを指します。
- ロゴやら検索フォームやらナビゲーションやらを囲みます。
- 記事やセクションの見出しと、その周りの情報を囲みます。
- タイトルや投稿者、時刻、ソーシャル系サービスのボタンなどがある部分も相当します。
headerは、見出しをその子孫に含むことがとても多いです。
footer要素はいわゆる「フッタ」です。こちらもheaderと同じく、ふたつの役割があります。
- #footerなど、レイアウト的なフッタを指します。
- セクションの最後にあるようなちょっとした情報を指します。
- ブログだと「Permalink | 12:34 | html5, markup」みたいなところ。
- 記事だと「次のページ」とか「連載トップへ」とか。
- ページトップ系も相当するかもしれませんが、わざわざマークアップする必要があるかどうかは微妙です。
footerという名前ですが、下にないといけないわけじゃありません。パジネーションや前へ・次へのリンクがページ上部にあることも考えられます。そういうものは場所に限らずfooterにしてもらって構いません。
「figure」は図版とかそういう意味ですが、figure要素はそういうものを囲みます。キャプション付きであることが多いと思います。
- イラストや写真など、画像全般
- ビデオ
- ソースコード
こんなものが該当すると仕様書に書かれています。
キャプションを表すにはfigcaption要素を使います。中にブロック要素を入れても内容モデル的には問題ありませんが、たぶん短いインラインな内容が多いでしょう。
figcaptionはfigureの直下にないといけません。スタイルをつけるときに問題がでてくるかもしれません。
画像すべてをfigureにするという使い方は適当ではありません。figureの定義には、「その部分を別ページにしても、文章の流れが壊れないか」という旨が書かれています。なかなかこれを満たすことは難しいように思いますが、商品写真などはこの定義に当てはまるのではないでしょうか。
キャプション用にfigcaption要素があります。しかし、これまでのHTMLにはcaption要素が表のキャプションをマークアップする為に存在していました。じゃあ、それを再利用すれば良いのではないかということはたぶん誰でも考えつきます。
もともと、キャプションを表す要素にはlegend要素が使われていました。
しかし、legendを書くとその周りに自動的にfieldsetが生成される、legend単独だと要素が消えてしまうなどトリッキーな実装が多く、疑問が寄せられていました。
- http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2009-July/thread.html#21061
- http://html5doctor.com/legend-not-such-a-legend-anymore/
で、legendではなくdtとddを使うように変更されました。新しい要素ではなく、既存の再利用でなんとか対応するというところです。
ここでなぜcaptionではなかったかというと、captionを持つ表をfigureに埋め込みたい場合に困るからというものがあったからです。
とはいえこれにもスタイルを当てるところで問題が出てしまいました。
で、結局figcaptionが導入されました。
なお、折り畳みボックスをマークアップするdetails要素のトグル部分も以前はlegendが使われていましたが、figureの変更と同時に専用の要素summaryが導入されています。
構造化要素のうち、section, nav, article, aside は「sectioning content」と呼ばれる特殊な内容モデルに属しています。sectioning contentの訳語が決まらないので、紛らわしいですが以下「セクション要素」と書きます。
仕様には「ヘッダとフッタのスコープを定義する」と書かれています。
セクション要素は意味ごとの「まとまり」を表します。まとまりの粒度はページや文脈に依存することがあります。難しいことを書いていますがそこまで気にしなくても大丈夫です。
section要素はもっとも基礎的なセクションです。汎用的な「まとまり」を表します。
section要素の例は、文章であれば章や節、アプリケーションであればタブなんかも相当するようです。このページであれば、「header」「footer」「section」「nav」など各要素の紹介がそれぞれ個別のsection、「グループ化要素」「セクション要素」という部分が、親のsectionとしてマークアップできるでしょう。
nav要素はナビゲーションを表すセクションになります。
文章であれば目次（このページにもありますね）、サイトであればグローバルナビやローカルナビになるでしょう。
リンクを囲っている部分を全てナビゲーションにするものではありません。「ページアップ」や「スキップリンク」などもナビゲーションでしょうが、これらはnavではないと考えています。
navの目的として「navの内容にアクセスしやすい」「その内容を飛ばして、コンテンツにアクセスしやすい」というのがあります。スクリーンリーダーがnavを解釈した状況を想定すると分かりやすいでしょうか。スキップリンクやページトップ自身がUIにexposeされたり、それらを飛ばすことを考えると、それらをnavにする必要はない、むしろしないほうがよいと考えられるのではないでしょうか。
article要素はsectionと似ていますが、「自己完結するセクション」になります。
自己完結ですから、その内容を取り出しても意味がちゃんと伝わるものがarticleとして適切です。名前のとおり記事やブログのエントリなどがあてはまります。
あと、ポータルサイトやブログのサイドバーにあるウィジェット系のコンテンツも「自己完結」してるのでarticleだそうです。
主観ですが、見出しの存在はsectionよりも強く求められるのではないかと思います。見出しなしで自己完結できるのか分かりませんし。
articleの中に複数のセクション要素があることはすんなり理解できると思います。では、articleを囲むセクション要素というものはあるでしょうか。ブログの過去記事一覧などを考えると、「2010年」「11月」といったsection、もしくは「カテゴリ：CSS」といったsectionの中に、個別の記事としてarticleが入るケースが考えられるでしょう。また、サイドバー中のウィジェットなどが、aside article という構造になっていることも考えられます。
aside要素一番説明のむつかしい要素です。「主題から外れたセクション」を表します。
記事やセクションの内容を理解するために不可欠ではない箇所がasideの内容になります。書籍や雑誌であればコラムとかが当たるでしょうか。参考にはなるけど、無くても構わないといったところです。
このページにも無理やり「こぼれ話」としてfigcaptionの名称について書いてみましたが、ああいったセクションはasideになります。
もうひとつ。もともと「sidebar」って要素だったこともあり、asideはサイドバーとしても使えます。sidebarとは技術書で横にある注釈なんかが入る箇所なんですが、Webサイトの「サイドバー」として使うことにも問題がないらしいです。「.mainな箇所を理解するために別に無くても構わない」と考えれば、たしかに問題なさそうです。
さて、「主題」をつかむ都合上、asideを使う際には文脈を理解する必要があります。サイドバーのようにテンプレート的に使うのであれば問題ないでしょうが、原稿があとから来る、モジュールの精査が浅く視覚的な表現のみが残ったビジュアルデザインなどがある原状の制作フローにおいては、使える場所がサイドバーくらいに限定されるのではないかと推測しています。
セクション要素とグループ化要素の違いは、それが文書のアウトラインに関係するかしないかというところです。
セクション要素は見出しと連携し、文書のアウトラインを構成します。HTML5にはアウトラインの生成アルゴリズムが定義されていて、それに従ってセクションのスコープやアウトラインが決定されます。
一番わかりやすいものから説明しましょう。セクション要素を入れ子にすることで、セクション要素の親子関係がわかり、それが文書のアウトラインに現れます。
各セクションはセクション要素によって定義されているので、これらは明示的なセクションと呼ばれます。
<body>
<h1>HTML5</h1>
<nav>
<h2>目次</h2>
...
</nav>
<section>
<h2>HTML5の内容モデル</h2>
...
</section>
<section>
<h2>HTML5のグループ化要素</h2>
<section>
<h3>header</h3>
...
</section>
<section>
<h3>footer</h3>
...
</section>
<section>
<h3>figure, figcaption</h3>
...
<aside>
<h4>こぼれ話：「figcaption」という名前</h4>
...
</aside>
</section>
</section>
...このマークアップからは、こういうアウトラインができます。
- HTML5
- (nav) 目次
- (section) HTML5の内容モデル
- (section) HTML5のグループ化要素
- (section) header
- (section) footer
- (section) figure, figcaption
- (aside) こぼれ話：「figcaption」という名前
- ...
このページの目次と同じような構造になってると思います。
アウトラインアルゴリズムでは、セクション要素内に最初に現れた見出しがそのセクションの見出しとなるようになっています。
では、セクション要素内に複数の見出しがある場合はどうなるでしょうか。
<article>
<h1>特集：HTML5</h1>
...
<h2>HTML5ってなに</h2>
...
<h3>HTML5と「HTML5」</h3>
...
<h2>HTML5とブラウザー</h2>
...
</article>最初の見出し（h1）がartcleの見出しになりますが、その他の見出しはアウトラインから捨てられてしまうのでしょうか。もちろん、そうではありません。
アウトラインアルゴリズムでは、見出しのランク（数字）によってもアウトラインが生成されます。これによって生成されるセクションは、暗黙的なセクションと呼ばれます。
ざっくりと解説すると、こうなります。
- セクションが定義される（明示的もしくは暗黙的）
- 見出しが見つかり、セクションの見出しになる
- 明示的なセクション要素が見つからないまま次の見出しが見つかった場合、現在のセクションの見出しと、見つかった見出しのランク（数字を比べる）
- 見つかった見出しのランクが、現在のセクションのそれ以上の場合
- 今のセクションがそこで終了し、新しいセクションが定義される
- 見つかった見出しが、新しいセクションの見出しになる
- 最初に戻って繰り返す
- 見つかった見出しのランクが、現在のセクションのそれ未満の場合
- 現在のセクションの中に、新しいサブセクションが定義される
- 見つかった見出しが、新しいセクションの見出しになる
- 次にセクションもしくは見出しが見つかったら、このサブセクションを閉じて最初に戻る
- 見つかった見出しのランクが、現在のセクションのそれ以上の場合
なので、見出しランクによってサブセクションがいい具合に出来ることになります。
暗黙的なセクションのしくみは、HTML4時代のHTMLからでもアウトラインが生成できるように定義されました。ですからこのXHTML1なページでも、それなりのアウトラインが生成されます。
<body>
<h1>HTML5</h1>
...
<h2>目次</h2>
...
<h2>HTML5の内容モデル</h2>
...
<h2>HTML5のグループ化要素</h2>
...
<h3>header</h3>
...
<h3>footer</h3>
...
<h3>figure, figcaption</h3>
...
<h4>こぼれ話：</h4>
...セクションの種類（ナビゲーションなのか、余談なのか）は分かりませんが、アウトラインとしては問題ありません。
主ににょろにょろで囲まれた部分ですが、あのマークアップってどうやるんでしょう。
ロゴとかであれば画像だしaltにまとめればいいとかってのもありますが、プレスリリースなどは結構面倒でしょう。プレーンテキストなものが多いからです。
<h2>軽量・コンパクトなボディで読書が手軽に楽しめる電子書籍リーダー<br />
リーダー ポケット エディション<sup>TM</sup>、リーダー タッチ エディション<sup>TM</sup>発売</h2>
<p>～“リーダーストア”による書籍販売サービスを12月より開始～</p>見出しとpです。これが多そうな気がします。pの中にstrongを入れるのも見た記憶があります。
<h1>ビートルズがiTunesにやって来た。</h1>
<h2>13枚の伝説的なザ・ビートルズスタジオアルバム全部と<br>スペシャルデジタルボックスセット</h2>h1とh2です。ランクの違う見出しを2つ使っています。
たしかにこれは良さそうですが、アウトラインを考えるとこうなります。
- ビートルズが～
- 13枚の伝説的な～
こういう構造じゃないので、誤りです。とはいえグループ化した見出しと考えるのが、一番理にかなっています。
ここで出てくるのがhgroupです。hgroupは他の見出しと同じくheading contentで、見出し要素のみを内容モデルに持ちます。こう書きます。
<hgroup>
<h1>ビートルズがiTunesにやって来た。</h1>
<h2>13枚の伝説的なザ・ビートルズスタジオアルバム全部と<br>スペシャルデジタルボックスセット</h2>
</hgroup>hgroupは中の見出し要素のランクを比べ、高いものをアウトラインに伝えます（この場合はh1ですね）。見出しランクも、高い方のランクがhgroupのランクとなります。見出しがない場合（non-conformingですが）のランクは1になります。
見出し「レベル」ではなく見出し「ランク」になったのは、レベルは絶対的な見出しの重要度を定義するという既存の定義が変更されたからでしょう。数字は暗黙的なセクションにおいて使われますが相対的な指標でしかないのです。
なので、HTML5では明示的なセクション要素とh1を使うか、セクションのネストに応じたランクを利用するかのどちらかを推奨しています。SEOやすべてにh1を使うという気持ち悪さをから、後者のほうがしばらくは使われるのかなと思います。