セクショニングコンテンツについて考える

セクショニングコンテンツとは

セクショニングコンテンツ

セクショニングコンテンツは、セクションの範囲を定義するコンテンツ。 article, aside, section, navがこれに該当します。 また、セクショニングコンテンツに当てはまらない要素は、基本的に「フロー・コンテンツ」に該当します。

フローコンテンツ

フロー・コンテンツは、文書の本体に現れる一般的なコンテンツです。 bodyタグ内にあるものはほとんどがフロー・コンテンツとなります。

各要素の定義

article

article要素は、文書、ページ、アプリケーション、またはサイトの中で完全もしくは自己完結した構造を表す。これは原則として、たとえばシンジケーションなど、独立して配布可能なまたは再利用可能なものである。これは、フォーラムの投稿、雑誌や新聞の記事、ブログのエントリ、ユーザーの投稿コメント、インタラクティブなウィジェットやガジェット、またはコンテンツの任意の独立した項目であるかもしれない。 article要素がネストされる場合、原則的に内側のarticle要素が外側の記事の内容に関連する記事を表す。たとえば、ユーザーの投稿コメントを受け付けるサイトのブログエントリは、ブログエントリのarticle要素内にネストされたarticle要素としてコメントを表すことができる。 article要素に関連付けられている著者の情報（address要素を参照のこと）は、ネストされたarticle要素には適用されない。 ページの主要コンテンツ（すなわちフッター、ヘッダー、ナビゲーションブロック、およびサイドバーを除く）が、すべて単一の自己完結型の構成物である場合、コンテンツはmain要素でマークアップされるべきであり、かつコンテンツはまたarticleでマークアップされてもよいが、（単一の文書であるように、ページが単一の構成物であることは自明なので）この場合は技術的に冗長である。 4.3 セクション — HTML5 日本語訳

aside

aside要素は、aside要素の周りにコンテンツとわずかに関連し、かつそのコンテンツから分離すると見なすことができるコンテンツで構成されるページのセクションを表す。このようなセクションは、しばしば活版印刷でサイドバーとして表示される。 この要素はリード文またはサイドバーのような印刷上の効果に対して、navの要素のグループに対して、広告に対して、およびそのページのメインコンテンツとは別に考えられる他のコンテンツに対して使用できる。 4.3 セクション — HTML5 日本語訳

section

section要素は、文書またはアプリケーションの一般的セクションを表す。この文脈においてセクションは、主題を表すコンテンツのグループである。各sectionの主題は、section要素の子として見出し（h1-h6要素）を含むことによって一般に識別されるべきである。 4.3 セクション — HTML5 日本語訳

nav

nav要素は、他のページへリンクするページのセクション、またはナビゲーションリンクをもつセクションのようなページ内部の一部を表す。 4.3 セクション — HTML5 日本語訳

番外編：main

mainはセクショニングコンテンツではありませんが、 いまいち使い方が曖昧だったので、調べてみました。

main要素は、文書やアプリケーションのbodyの主要コンテンツを表す。主要コンテンツ領域は、直接に関連するコンテンツで構成される、または文書の中心的な話題、またはアプリケーションの中心的機能を発展させる。 文書の主要コンテンツ領域は、その文書に固有であり、サイトナビゲーションリンク、著作権情報、サイトのロゴやバナーや（文書やアプリケーションの主な機能が検索フォームである場合を除く）検索フォームのような、一連の文書を横断して繰り返されるコンテンツを除外したコンテンツを含む。 著者は、文書内に複数のmain要素を含めてはならない。 著者は、article、aside、footer、headerまたはnav要素の子孫として、main要素を含めてはならない。 4.3 セクション — HTML5 日本語訳 3 セマンティック、構造、HTML文書のAPI群 — HTML5 日本語訳 4.4 グルーピングコンテンツ — HTML5 日本語訳