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