HTML5 における article と section 要素の使い分け
HTML5 における article 要素 と section 要素の違いについては各所で説明されていますが、 私にとってそれらはとても分かり難いものでした。
ここでは article 要素 と section 要素の違いについて、私の見解を示しています。
分かり難い点を明確にする
まず私が悩んだ要因を明確にします。結論から言うと、section 要素の存在する理由が分からなかったのです。
- article 要素は、自己完結したコンテンツに用いるべきである。
- では自己完結したコンテンツとは何か。自己完結しないコンテンツとは何か。
- section 要素は、コンテンツを区別するようなスタイリングを目的として利用してはいけない。
- そのような場合は div 要素を代わりに用いることが推奨されている。
- では section 要素の存在意義は何か。div 要素だけではだめか。
"独立したコンテンツ"という表記が分かり難い
一部の情報では article 要素を適用するべきコンテンツを"独立したコンテンツ"と表記しています。 この表現は適切ですが、"これだけでは"、非常に分かり難いと思います。
section 要素も他のコンテンツから独立したコンテンツであるためです。 そもそも独立しないコンテンツはタグによって区分するべきではありません。
section 要素は必要
section 要素の必要性を明確にするには、article 要素の定義を先に考える必要がありました。 自己完結しないコンテンツを考えると section 要素の必要性が見えてきます。
例えば論文や小説などの構成を考えると良く分かります。 ある論文や小説があり、それが 1 章、2 章～と続くとき、2 章以降の内容は、1 章の内容が分からなければ読めません。
この考えに基づいて論文や小説を HTML ドキュメントとして構成しようとするとき、 本文全体が1つの article 要素であり、各章や節はそれぞれ section 要素であるべきです。
サンプルケース
いくつかのサンプルについて考えてみます。
論文や小説
論文や小説の各章・節は、それより前の章や節の内容が提示されなければ内容を理解することができないので、section 要素であるべきです。
新聞の記事
新聞の記事は、1 枚の大きなページにいくつかの話題が含まれます。 ある見出しで始まり、それに続いて見出しの内容が述べられているのであれば、それは article 要素であるべきです。
例えば「A選手がホームラン王になった」という内容と「B国の中央銀行が大規模な金融緩和を行った」という内容は、 異なる内容で、それぞれが自己完結するので、それぞれ article 要素であるべきです。
ただし 1 つの話題の中にある、いくつかの小さな見出しは section 要素になる可能性があります。 また小さな見出しは aside 要素が適切であるかどうかも検討する必要があります。
Webページに対するコメント
Webページに対するコメントは、そのページの内容を読んだ上で投稿されるものですから、そのコメントだけで自己完結するとは言えません。 したがって section 要素が適切だと思います。
しかしながら、各コメントはそれぞれが独立したコンテンツである、とも取ることができます。
厳格な定義は定められていませんので、各々の感性で選択するしかないように思います。
WEB 各記事の見出しのページ
多くの記事を投稿するニュースサイトやブログなどでは、タイトルとその内容の一部(要約など)だけをトップページなどにリスト化して表示することがあります。 このときの構造はどうあるべきでしょうか。大きく2つの方法があると思います。
1つは、タイトルと要約のセットをリスト化したものは、全体で1つの article 要素と見なす方法です。 タイトルと要約のセットをリストにして構成する、という目的でそのコンテンツを提供しているので、それを自己完結している、と見ることができます。 このとき、それぞれの見出し (と要約のセット) は section になります。
もう 1 つは、新聞と同じです。それぞれが独立した記事であるから、タイトルと要約のセットはそれぞれが article 要素であり、またそのリスト全体も article 要素、という方法です。
他の記事から独立している、記事の見出しをタイトルと合わせて提供する、という目的を達することから article として考えるのが一般的なように見えます。
Reference
- section 要素 - HTML5.JP
- Bruce Lawson 氏 の見解が翻訳されています。この見解が最も見やすく限りなく正しいように思えます。
- The section element - HTML5 Doctor
- 原文です。
- HTML5セクション要素のまとめ - 浜 俊太朗のHTML5マークアップ移行ガイド ― 第4回
- 記事のタイトルと見出しについて、浜 俊太朗 氏 は、このページの見解と異なる見解を述べています。