HTML5/CSS3の授業ノート

HTML5には、約100種類程度の要素があり、それらを分類するための「カテゴリー」という概念があります。
類似する特性を持った要素が7つに分類され、それぞれの要素は0個以上のカテゴリーに分類されます。つまり、どこのカテゴリーにも属さない要素や、複数のカテゴリーに属する要素も存在します。

コンテンツモデル(要素の配置ルール)は、ある要素がどの要素を内容として持つことができるか(つまり子要素にできるか)というルールを表します。
例えば、「フローコンテンツ」であるdiv要素は、フローコンテンツに属するp要素などを内容として持てます。フローコンテンツに属していないli要素などを内容として持つことはできません。

カテゴリー

メタデータ・コンテンツ

表示方法や文書のその他の部分の挙動を変化させたり、CSSやJavaScriptへのリンクを確立させたり、その他の本文外の情報を伝えたりします。
基本的には画面に表示されない要素になります。
base,link,meta,noscript,script, style,title

フロー・コンテンツ

body要素内で配置場所を限定されずに使用できる一般要素です。HTML5の仕様書では、body要素の子要素として直接配置できるのはフローコンテンツのみとされています。
全要素の大部分を占めるため、属さない要素を覚える方が簡単です。
bodyの外側にあるものと特定のフローコンテンツの子要素以外

セクショニング・コンテンツ…区分コンテンツ

章・節・項のように文書のアウトライン(階層構造)を形成する要素です。
article,aside nav,section

ヘディング・コンテンツ…見出しコンテンツ

見出しを示す要素が分類されます。
h1,h2,h3,h4,h5,h6

フレージング・コンテンツ…記述コンテンツ

文章とその中に含まれるマークアップを定義します。記述コンテンツの集まりで段落を構成します。従来のインライン要素に近い概念のカテゴリーです。
b,br,button,code,em, embed,i,iframe,img,input,label,object,picture, q, script,select,small,span,strong,textarea,テキスト　など

エンベッディッド・コンテンツ…埋め込みコンテンツ

文書外部のリソースや、HTML以外の言語で生成されたコンテンツを埋め込む要素が分類されます。
audio,canvas,embed,iframe,img,math,object, svg,video

インタラクティブ・コンテンツ…対話型コンテンツ

ユーザーが何かしらの操作(クリックなど)をすることができる要素が分類されます。要素によっては、特定の条件下にある場合にのみこのカテゴリーに所属します。a,button,details,embed, iframe,label,select,textarea

コンテンツモデル

『〇〇要素の中には◆◆要素が配置できる』といった配置ルールの事です。HTML5から登場した概念で、HTML5より前にあったブロックレベル要素とインライン要素をさらに細かく定義し直したものです。
コンテンツ・モデルの多くは、要素のカテゴリー名で表されます。ただし、中には「特定の要素のみが配置可能(リストやテーブルなど)」「透明(親要素のコンテンツ・モデルを引き継ぐ)」などといったものもあります。