divとsectionとarticle要素それぞれの特徴、使い分けと組み合わせ方 -HTML5のセクショニング コンテンツ

HTML5は、ドキュメントを構造化する際に用いるセマンティックなコードです。あなたがどんなタグを使うかによって、ユーザエージェントにその意味を伝えます。

HTML5のタグにはさまざまなものがあり、中でもsectionとarticle要素は、div要素より有意義な方法でコンテンツを区分する手段として導入されました。これら3つをどのように使い分けるか確認しておきましょう。

サイトのキャプチャ

Sectioning Content in HTML5 -Div or Section or Article

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

divとsectionとarticle、それぞれの特徴

div要素

div要素は最も汎用的な要素で、特別ではない意味を持っています。言い換えると、意味的に関係していないコンテンツをまとめる、ということになります。
div要素内のコンテンツは本質的に無意味なものであるため、多用ぜずに限られた箇所のみに使うべきです。

W3Cでは、下記のように説明されています。

div要素は他のどのような要素も適当ではない時に、最後の頼みの綱として使用することを推奨します。

W3C Recommendation

したがってdiv要素は主に、CSSでターゲットとして利用するためにコンテンツをグループ化する時に使うのがよいでしょう。
例えば、下記のように複数の要素をまとめるコンテナのためにdiv要素を使います。

section要素

section要素はdiv要素より、目的がはっきりしています。意味的に有意義な方法でグループ化されたコンテンツの一般的なセクションに適用され、見出し要素の利用が強く推奨されています。

W3Cでは、下記のように説明されています。

一般的な原則としては、要素のコンテンツがドキュメントのアウトラインで明示的にリストされる場合に限り、section要素が適切である。

W3C Recommendation

これはつまり、section要素のコンテンツは有意義であるため、テーマを持っているべきです。section要素のテーマとは、sectionタグのすぐ後に続いて定義されるべきです。

article要素

article要素はsection要素より、さらに使い方が特定されます。意味的に関連したコンテンツのセクションに適用します。そして、このコンテンツのセクションは独立しているべきです。つまりarticle要素のコンテンツは、ページの残りから隔離されても意味を持つことが可能であることを意味します。

article要素のよくある目的は、コンテンツのマーキングです。例えば、ブログの記事にマークを付けます。

divとsectionとarticle、どれを使う?

divとsectionとarticle、どれをどのような時に使うべきでしょうか?

もし要素内のコンテンツに意味がないのであれば、div要素を使います。
意味があるコンテンツで、しかも独立しても成り立つのであれば、article要素を使います。そうでなければ、section要素を使ってください。

divとsectionとarticle、どれを使う?

divとsectionとarticleの使い分けのフロー

sectionとarticleの組み合わせ方

divとsectionとarticle、それぞれの使い分け方はシンプルでした。しかしsectionとarticleを組み合わせて使うとなると、少し複雑になります。

articleの中にarticle

article要素はarticle要素をネストすることができます。内側のarticle要素が、外側のarticle要素の内容と関係がある時のみです。

例えば、ブログの記事に長い抜粋がある時にarticle要素をネストします。

sectionの中にarticle

section要素の中には同様に、article要素を複数配置できます。

例えば、ブログで記事の一覧を表示する時に、各記事のタイトルと抜粋をarticle要素で実装し、それらをsection要素で内包します。

articleの中にsection

それぞれ個別のarticle要素がsection要素をもつこともできます。

例えば、元記事は下記の構造で記述されています。

サイトのキャプチャ

Sectioning Content in HTML5 -Div or Section or Article

top of page

©2018 coliss