divとsectionとarticle要素それぞれの特徴、使い分けと組み合わせ方 -HTML5のセクショニング コンテンツ
Post on:2015年10月14日
sponsors
HTML5は、ドキュメントを構造化する際に用いるセマンティックなコードです。あなたがどんなタグを使うかによって、ユーザエージェントにその意味を伝えます。
HTML5のタグにはさまざまなものがあり、中でもsectionとarticle要素は、div要素より有意義な方法でコンテンツを区分する手段として導入されました。これら3つをどのように使い分けるか確認しておきましょう。
Sectioning Content in HTML5 -Div or Section or Article
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。
divとsectionとarticle、それぞれの特徴
div要素
div要素は最も汎用的な要素で、特別ではない意味を持っています。言い換えると、意味的に関係していないコンテンツをまとめる、ということになります。
div要素内のコンテンツは本質的に無意味なものであるため、多用ぜずに限られた箇所のみに使うべきです。
W3Cでは、下記のように説明されています。
div要素は他のどのような要素も適当ではない時に、最後の頼みの綱として使用することを推奨します。
したがってdiv要素は主に、CSSでターゲットとして利用するためにコンテンツをグループ化する時に使うのがよいでしょう。
例えば、下記のように複数の要素をまとめるコンテナのためにdiv要素を使います。
|
1 2 3 4 5 6 |
<div class="modal-container"> <section class="modal"> <h1>Modal Title</h1> <p>Text goes here</p> </section> </div> |
section要素
section要素はdiv要素より、目的がはっきりしています。意味的に有意義な方法でグループ化されたコンテンツの一般的なセクションに適用され、見出し要素の利用が強く推奨されています。
W3Cでは、下記のように説明されています。
一般的な原則としては、要素のコンテンツがドキュメントのアウトラインで明示的にリストされる場合に限り、section要素が適切である。
これはつまり、section要素のコンテンツは有意義であるため、テーマを持っているべきです。section要素のテーマとは、sectionタグのすぐ後に続いて定義されるべきです。
|
1 2 3 4 |
<section class="newsletter"> <h1>Subscribe to the Newsletter</h1> <form> <!-- ... --> </form> </section> |
article要素
article要素はsection要素より、さらに使い方が特定されます。意味的に関連したコンテンツのセクションに適用します。そして、このコンテンツのセクションは独立しているべきです。つまりarticle要素のコンテンツは、ページの残りから隔離されても意味を持つことが可能であることを意味します。
article要素のよくある目的は、コンテンツのマーキングです。例えば、ブログの記事にマークを付けます。
|
1 2 3 4 5 |
<article class="post"> <h1>Article Title</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> <p>Quae similitudo in genere etiam humano apparet. Est, ut dicis, inquam...</p> </article> |
divとsectionとarticle、どれを使う？
divとsectionとarticle、どれをどのような時に使うべきでしょうか？
もし要素内のコンテンツに意味がないのであれば、div要素を使います。
意味があるコンテンツで、しかも独立しても成り立つのであれば、article要素を使います。そうでなければ、section要素を使ってください。
divとsectionとarticleの使い分けのフロー
sectionとarticleの組み合わせ方
divとsectionとarticle、それぞれの使い分け方はシンプルでした。しかしsectionとarticleを組み合わせて使うとなると、少し複雑になります。
articleの中にarticle
article要素はarticle要素をネストすることができます。内側のarticle要素が、外側のarticle要素の内容と関係がある時のみです。
例えば、ブログの記事に長い抜粋がある時にarticle要素をネストします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<article> <h1>Article Title</h1> <p class="author">John Smith</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <article> <h2>Another Article</h2> <p class="author">Jane Doe</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </article> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </article> |
sectionの中にarticle
section要素の中には同様に、article要素を複数配置できます。
例えば、ブログで記事の一覧を表示する時に、各記事のタイトルと抜粋をarticle要素で実装し、それらをsection要素で内包します。
|
1 2 3 4 5 6 7 8 9 10 11 |
<section> <h1>Latest Blog Posts</h1> <article> <h2>Blog Post Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </article> <article> <h2>Blog Post Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </article> </section> |
articleの中にsection
それぞれ個別のarticle要素がsection要素をもつこともできます。
例えば、元記事は下記の構造で記述されています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<article> <h1>Sectioning Content in HTML5 - div or section or article?</h1> <section> <h2>Overview of the Elements</h2> <section> <h3>div</h3> <p>The div element is the most general purpose element.</p> </section> <section> <h3>section</h3> <p>The section element is slightly more specific that a div</p> </section> <section> <h3>article</h3> <p>The article element is even more specific than a section</p> </section> </section> <section> <h2>div or section or article?</h2> <!-- ... --> </section> <section> <h2>Combining the Elements</h2> <!-- ... --> </section> </article> |
sponsors
