HTML5〜コンテンツモデル

HTML&CSS

HTML5におけるコンテンツモデルとは、ある要素の中に何を含めることができるかを定義したものです。
例えば次のようなHTMLがあったなら、コンテンツモデルから正しい書き方かどうか判断できます。

<div>
  <h1>見出し1</h1>
</div>

div要素のカテゴリはフローコンテンツ、h1要素のカテゴリはフローコンテンツとヘッディングコンテンツになります。
コンテンツモデルを見ると、div要素はフローコンテンツを含めますので、divの中にh1があるのは正しい書き方です。
また、h1要素はフレージングコンテンツを含めますので、h1の中にはテキストなどのフレージングコンテンツを入れる事ができますが、divなどのフローコンテンツを入れる事はできません。この考え方がHTML5コンテンツモデルです。

以下は各種タグのカテゴリとコンテンツモデルをまとめたものです。
*対象のカテゴリをクリックすると見やすくなります。
*フローコンテンツはほぼ全ての要素を含みますので複数のカラーが着いています。
*各カテゴリで複数の色が着いているものは複数のカテゴリに属しているものです。

  • 全て表示
  • フロー
  • フレージング
  • セクショニング
  • ヘッディング
  • インタラクティブ
  • セクショニング・ルート
要素 カテゴリ コンテンツモデル 特性 補足
a フロー・コンテンツ / フレージング・コンテンツ/ インタラクティブ・コンテンツ トランスペアレント(親要素から継承) ただし、インタラクティブ・コンテンツは含められない ハイパーリンク。  
abbr フロー・コンテンツ / フレージング・コンテンツ フレージング・コンテンツ 略語や頭字語  
address フロー・コンテンツ フロー・コンテンツ(ただし、セクショニング・コンテンツ、ヘッディング・コンテンツ、header要素、footer要素、address要素は含められない) 連絡先情報  
area フロー・コンテンツ / フレージング・コンテンツ イメージマップのリンク領域 map 要素の子孫だった場合
article フロー・コンテンツ / セクショニング・コンテンツ フロー・コンテンツ 自己完結したセクション  
aside フロー・コンテンツ / セクショニング・コンテンツ フロー・コンテンツ メインコンテンツから分離された補足的なセクション  
audio フロー・コンテンツ / フレージング・コンテンツ / エンベッディッド・コンテンツ / インタラクティブ・コンテンツ(controls属性がある場合) src属性がある場合:0個以上のtrack要素、その後にトランスペアレント(親要素から継承) / src属性がない場合:0個以上のsource要素、その後に0個以上のtrack要素、その後にトランスペアレント ただし、どちらの場合もvideo要素とaudio要素は含められない 音声を埋め込む  
b フロー・コンテンツ / フレージング・コンテンツ フレージング・コンテンツ 他とは区別されるテキスト(キーワードや製品名 等)  
base メタデータ・コンテンツ 相対URLの基準となるURL  
bdi フロー・コンテンツ / フレージング・コンテンツ フレージング・コンテンツ 隔離されたテキスト  
bdo フロー・コンテンツ / フレージング・コンテンツ フレージング・コンテンツ 書字方向  
blockquote フロー・コンテンツ / セクショニング・ルート フロー・コンテンツ 引用部分  
body セクショニング・ルート フロー・コンテンツ 文書の本体部分  
br フロー・コンテンツ / フレージング・コンテンツ 改行  
button フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ フレージング・コンテンツ(ただし、インタラクティブ・コンテンツは含められない) ボタン  
canvas フロー・コンテンツ / フレージング・コンテンツ / エンベッディッド・コンテンツ トランスペアレント(親要素から継承) グラフィックスを描くための領域  
caption   フロー・コンテンツ(ただし、table要素は含められない) 表のキャプション  
cite フロー・コンテンツ / フレージング・コンテンツ フレージング・コンテンツ 作品のタイトル  
code フロー・コンテンツ / フレージング・コンテンツ フレージング・コンテンツ ソースコード  
col   列グループに含まれる1つ以上の列  
colgroup   span属性がある場合:空 / span属性がない場合:0個以上のcol要素 表の列をグループ化  
command メタデータ・コンテンツ / フロー・コンテンツ / フレージング・コンテンツ コマンド(命令)  
datalist フロー・コンテンツ / フレージング・コンテンツ 0個以上のoption要素 / フレージング・コンテンツ 入力候補のリストを作成  
dd   フロー・コンテンツ 記述リスト(dl要素)における説明の部分  
del フロー・コンテンツ / フレージング・コンテンツ(フレージング・コンテンツのみを含む場合) トランスペアレント(親要素から継承) 削除された部分  
details フロー・コンテンツ / インタラクティブ・コンテンツ / セクショニング・ルート 1つのsummary要素、その後にフロー・コンテンツ 詳細情報  
dfn フロー・コンテンツ / フレージング・コンテンツ フレージング・コンテンツ(ただし、dfn要素は含められない) 定義される用語  
div フロー・コンテンツ フロー・コンテンツ グループ化  
dl フロー・コンテンツ 1つ以上のdt要素と、それに続く1つ以上のdd要素のグループを0個以上。 HTML5.2からdivを含めることも可となった。 記述リスト  
dt   フレージング・コンテンツ 用語  
em フロー・コンテンツ / フレージング・コンテンツ フレージング・コンテンツ トーンを強めて言いたいような箇所  
embed フロー・コンテンツ / フレージング・コンテンツ / エンベッディッド・コンテンツ / インタラクティブ・コンテンツ 動画や音声などを埋め込み  
fieldset フロー・コンテンツ / セクショニング・ルート 任意で1つのlegend要素と、その後にフロー・コンテンツ フォーム部品をグループ化  
figcaption   フロー・コンテンツ 図版のキャプション  
figure フロー・コンテンツ / セクショニング・ルート フロー・コンテンツ(figcaption要素を使用する場合は、figure要素内の最初か最後のどちらかにのみ(1つだけ)配置することができる) 図版  
footer フロー・コンテンツ フロー・コンテンツ(ただし、header要素とfooter要素は含められない) セクションのフッタ  
form フロー・コンテンツ フロー・コンテンツ(ただし、form要素は含められない) 入力フォームを作成  
h1 フロー・コンテンツ / ヘッディング・コンテンツ フレージング・コンテンツ 見出し  
h2 フロー・コンテンツ / ヘッディング・コンテンツ フレージング・コンテンツ 見出し  
h3 フロー・コンテンツ / ヘッディング・コンテンツ フレージング・コンテンツ 見出し  
h4 フロー・コンテンツ / ヘッディング・コンテンツ フレージング・コンテンツ 見出し  
h5 フロー・コンテンツ / ヘッディング・コンテンツ フレージング・コンテンツ 見出し  
h6 フロー・コンテンツ / ヘッディング・コンテンツ フレージング・コンテンツ 見出し  
head   メタデータ・コンテンツを1つ以上 メタデータの集まり  
header フロー・コンテンツ フロー・コンテンツ(ただし、header要素とfooter要素は含められない) セクションのヘッダ  
hr フロー・コンテンツ 段落レベルのテーマの区切り  
html   head要素、body要素の順で1つずつ ルート要素  
i フロー・コンテンツ / フレージング・コンテンツ フレージング・コンテンツ 思考や専門用語  
iframe フロー・コンテンツ / フレージング・コンテンツ / エンベッディッド・コンテンツ / インタラクティブ・コンテンツ テキスト インラインフレーム  
img フロー・コンテンツ / フレージング・コンテンツ / エンベッディッド・コンテンツ / インタラクティブ・コンテンツ(usemap属性がある場合) 画像を文書内に埋め込み  
input フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ(ただし、type="hidden"の場合は除く) フォームの各種部品  
ins フロー・コンテンツ / フレージング・コンテンツ(フレージング・コンテンツのみを含む場合) トランスペアレント(親要素から継承) 追加された部分  
kbd フロー・コンテンツ / フレージング・コンテンツ フレージング・コンテンツ キーボードからの入力  
keygen フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ フォームの送信時に暗号鍵(秘密鍵と公開鍵のペア)を生成  
label フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ フレージング・コンテンツ(ただし、そのラベルの対象でないラベル付け可能なフォーム関連要素は含められない / label要素は含められない) フォーム部品のラベル  
legend   フレージング・コンテンツ 部品グループのキャプション  
li   フロー・コンテンツ リストの項目を表します  
link メタデータ・コンテンツ その文書全体を別の文書類と関連付けます  
map フロー・コンテンツ / フレージング・コンテンツ(フレージング・コンテンツのみを含む場合) トランスペアレント(親要素から継承) イメージマップ  
mark フロー・コンテンツ / フレージング・コンテンツ フレージング・コンテンツ ハイライトされるテキスト  
math        
menu フロー・コンテンツ / インタラクティブ・コンテンツ(type="toolbar"が指定されている場合) li要素を0個以上 / フロー・コンテンツ コマンド(命令)のリスト  
meter フロー・コンテンツ / フレージング・コンテンツ フレージング・コンテンツ(ただし、meter要素は含められない) 特定の範囲内における数量や割合  
nav フロー・コンテンツ / セクショニング・コンテンツ フロー・コンテンツ ナビゲーション  
noscript メタデータ・コンテンツ / フロー・コンテンツ / フレージング・コンテンツ head要素内ではlink要素、style要素、meta要素を0個以上 また、body要素内ではトランスペアレント(親要素から継承) スクリプトが利用できない環境用  
object フロー・コンテンツ / フレージング・コンテンツ / エンベッディッド・コンテンツ / インタラクティブ・コンテンツ(usemap属性がある場合) param要素を0個以上、その後にトランスペアレント(親要素から継承) 様々な形式のコンテンツ  
ol フロー・コンテンツ li要素を0個以上 順序付きのリスト  
optgroup   option要素を0個以上 プルダウンメニューの選択肢をグループ化  
option   テキスト プルダウンメニューの選択肢  
output フロー・コンテンツ / フレージング・コンテンツ フレージング・コンテンツ 計算結果の出力  
p フロー・コンテンツ フレージング・コンテンツ 段落  
param   プラグインに渡すパラメータ  
pre フロー・コンテンツ フレージング・コンテンツ 整形済みのテキスト  
progress フロー・コンテンツ / フレージング・コンテンツ フレージング・コンテンツ(ただし、progress要素は含められない) 作業の進捗状況  
q フロー・コンテンツ / フレージング・コンテンツ フレージング・コンテンツ 他の情報源からの引用部分  
rp   フレージング・コンテンツ ルビテキストを囲む括弧記号  
rt   フレージング・コンテンツ 直前のテキストに対するルビテキスト  
ruby フロー・コンテンツ / フレージング・コンテンツ フレージング・コンテンツの後に1つのrt要素を配置したグループ、またはフレージング・コンテンツの後にrp要素、rt要素、rp要素を配置したグループ ルビ(ふりがな)を振るテキスト  
s フロー・コンテンツ / フレージング・コンテンツ フレージング・コンテンツ 正確ではない、関連性がなくなった  
samp フロー・コンテンツ / フレージング・コンテンツ フレージング・コンテンツ プログラムなどの出力サンプル  
script メタデータ・コンテンツ / フロー・コンテンツ / フレージング・コンテンツ 空、またはスクリプトのコード スクリプト(主にJavaScript)を埋め込むための要素  
section フロー・コンテンツ / セクショニング・コンテンツ フロー・コンテンツ セクション  
select フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ 0個以上のoption要素またはoptgroup要素 プルダウンメニュー  
small フロー・コンテンツ / フレージング・コンテンツ フレージング・コンテンツ 細目(免責事項、著作権表記、ライセンス要件、他)  
source   再生候補となるメディアファイル  
span フロー・コンテンツ / フレージング・コンテンツ フレージング・コンテンツ フレージング・コンテンツをグループ化  
strong フロー・コンテンツ / フレージング・コンテンツ フレージング・コンテンツ 強い重要性  
style scoped属性がない場合:メタデータ・コンテンツ scoped属性がある場合:フロー・コンテンツ スタイルシートのコード スタイルシートを記述 scoped 属性が存在している場合
sub フロー・コンテンツ / フレージング・コンテンツ フレージング・コンテンツ 下付き文字  
summary   フレージング・コンテンツ 詳細情報のキャプション、要約、説明文  
sup フロー・コンテンツ / フレージング・コンテンツ フレージング・コンテンツ 上付き文字  
svg        
table フロー・コンテンツ   表の大枠  
tbody   0個以上のtr要素 行のグループ  
td セクショニング・ルート フロー・コンテンツ データセル  
textarea フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ テキスト 複数行のテキスト入力欄  
tfoot   0個以上のtr要素 行のグループ  
th   フレージング・コンテンツ 見出しセル  
thead   0個以上のtr要素 表のヘッダ部分となる行のグループ  
time フロー・コンテンツ / フレージング・コンテンツ フレージング・コンテンツ(ただし、time要素は含められない) 日付や時刻  
title メタデータ・コンテンツ テキスト 文書のタイトル  
tr   th要素またはtd要素を0個以上 行を表します  
track   動画や音声にテキストトラックを埋め込みます  
u フロー・コンテンツ / フレージング・コンテンツ フレージング・コンテンツ テキストのラベル付けを行います  
ul フロー・コンテンツ li要素を0個以上 箇条書きのリスト  
var フロー・コンテンツ / フレージング・コンテンツ フレージング・コンテンツ 変数  
video フロー・コンテンツ / フレージング・コンテンツ / エンベッディッド・コンテンツ / インタラクティブ・コンテンツ(controls属性がある場合) src属性がある場合:0個以上のtrack要素、その後にトランスペアレント(親要素から継承) / src属性がない場合:0個以上のsource要素、その後に0個以上のtrack要素、その後にトランスペアレント ただし、どちらの場合もvideo要素とaudio要素は含められない 動画を文書内に埋め込みます  
wbr フロー・コンテンツ / フレージング・コンテンツ 改行位置の候補  
Text        
タイトルとURLをコピーしました