このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

コンテンツ・モデル

記事Sep.22nd,2020
要素を配置できる場所や要素の中に含むことができるコンテンツを定義するコンテンツ・モデルについて

“コンテンツ・モデル”とは?

コンテンツ・モデル(Content models)”はそれぞれの要素が内容として含むことができるコンテンツについての定義です。

HTML4までは要素は“ブロックレベル要素”と“インライン要素”に分類されてその内包関係のルールが定義されていましたが、HTML5では要素は7つのコンテンツ・カテゴリーに分類されてより細かく内包関係のルールが定義されています。

すべての要素は内容として含むことができるコンテンツ・カテゴリーが定義されており、それ以外のコンテンツを含むことはできません。また、要素を配置することができる場所もコンテンツ・カテゴリーによって定義されています。

例えば、以下の例ではp”要素h1”要素の中に配置されています。しかし、h1”要素の中にはフレージング・コンテンツしか配置することができないのでフレージング・コンテンツではないp”要素を中に配置するのは正しくありません。

<h1>
<p>マンゴスチンの果実</p>
</h1>
<p>
マンゴスチンの果実は球形でやや硬い暗赤紫色の皮に包まれている。果肉部分は白色でミカンの房のような形をしている。
</p>

以下の例ではp”要素blockquote”要素の中に配置されています。blockquote”要素の中にはフロー・コンテンツを配置できるので、フロー・コンテンツであるp”要素を配置することができます。

<blockquote>
<p>
清少納言こそ、したり顔にいみじうはべりける人。さばかりさかしだち、真名書き散らしてはべるほども、よく見れば、まだいと足らぬこと多かり。かく、人に異ならむと思ひ好める人は、かならず見劣りし、行末うたてのみはべれば、艶になりぬる人は、いとすごうすずろなる折も、もののあはれにすすみ、をかしきことも見過ぐさぬほどに、おのづからさるまじくあだなるさまにもなるにはべるべし。そのあだになりぬる人の果て、いかでかはよくはべらむ。
</p>
</blockquote>

要素はコンテンツ・カテゴリーだけでなく、“空要素”、“テンプレート要素”、“生テキスト要素”、“エスケープ可能生テキスト要素”、“外来要素”、“普通要素”のいずれかにも分類され、この分類によっても要素に含むことができる内容が制約されます。

コンテンツ・カテゴリー

多くの要素ではコンテンツ・モデルは7つある主要コンテンツ・カテゴリーで定義されています。

メタデータ・コンテンツ ユーザーエージェントが処理するための情報を表す要素
フロー・コンテンツ body”要素内に配置できる要素
セクショニング・コンテンツ アウトラインを生成する要素
ヘッディング・コンテンツ 見出しを表す要素
フレージング・コンテンツ テキストを表す要素
エンベッディッド・コンテンツ 外部リソースを埋め込む要素
インタラクティブ・コンテンツ ユーザーが操作することができる要素

要素によっては主要コンテンツ・カテゴリー以外のより細分化されたカテゴリーでコンテンツ・モデルが定義されたり、特定の要素のみに限定されている場合もあります。

また、親要素のコンテンツ・モデルを継承する“トランスペアレント”な要素もあります。

“空”のコンテンツ・モデル

要素によっては内容を持つことができないものもあり、この場合、その要素のコンテンツ・モデルは“(The "nothing" content model)”であると言います。

コンテンツ・モデルが“空”の要素の一覧

要素 用途
<area> イメージマップの領域を指定
<base> 相対リンクの基準となるURLを指定す
<br> 改行を表す
<col> 表の列を表す
<embed> プラグインデータの埋め込み
<hr> テーマの区切りを表す
<iframe> 他の文書の埋め込み
<img> 画像を埋め込む
<input> 入力欄
<link> 外部リソースと関連付ける
<meta> その他のメタデータを表す
<param> パラメータを表す
<source> 選択可能なメディアリソースを複数指定
<template> テンプレートを表す
<track> テキストトラックを埋め込む
<wbr> 改行可能な箇所を指定
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク