このウェブサイトはご利用の端末での閲覧に対応していません。
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”要素内に配置できる要素
セクショニング・コンテンツ アウトラインを生成する要素
ヘッディング・コンテンツ 見出しを表す要素
フレージング・コンテンツ テキストを表す要素
エンベッディッド・コンテンツ 外部リソースを埋め込む要素
インタラクティブ・コンテンツ ユーザーが操作することができる要素

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

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

空要素

“空要素”とは?

要素によっては内容を持つことができないものもあります。これらの要素は“空要素”と呼ばれます。

多くの空要素は終了タグがありません。終了タグがない要素場合はその要素に終了タグを記述してはいけません。

空要素の一覧

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