[38-2] 「コンテンツ・モデル」一覧

最終更新日:2017年11月11日  (初回投稿日:2012年02月27日)

今回は各要素のコンテンツ・モデル一覧を作りました。
各要素の「カテゴリー」と「コンテンツ・モデル」を一覧で見たかったのでw。
その要素をどこに置く事ができて、中にどんな要素を入れていいか、即調べられます。

要素の「カテゴリー」については、
[37] HTML5要素の「カテゴリー」を見てみよう
「コンテンツ・モデル」については、
[38-1] 「コンテンツ・モデル」で要素のルールを見てみようをご覧ください。

各要素のカテゴリーとコンテンツ・モデル一覧

2017年11月:初回投稿日は2012年でしたが、その後 HTML5、HTML5.1 が勧告となり、仕様に追加された要素、除外された要素があったため、全体を見直しました。

参考:
HTML 5.1 2nd Edition - W3C Recommendation
HTML Living Standard - 4 The elements of HTML | WHATWG

クリックでジャンプできます。

要素名 (Alphabet順) カテゴリー コンテンツ・モデル
a フロー・コンテント
フレージング・コンテント
href属性があればインタラクティブ・コンテント
トランスペアレント 
ただし、子要素にインタラクティブ・コンテントは入らない
abbr フロー・コンテント
フレージング・コンテント
フレージング・コンテント
address フロー・コンテント フロー・コンテント 
ただし、子孫にヘッディング・コンテント、セクショニング・コンテント、header 要素、footer 要素、address 要素を含まないこと。
area フロー・コンテント
フレージング・コンテント
article フロー・コンテント
セクショニング・コンテント
フロー・コンテント
aside フロー・コンテント
セクショニング・コンテント
フロー・コンテント
(ただし main要素は入らない)
audio フロー・コンテント
フレージング・コンテント
エンベッディッド・コンテント
controls属性を持つ場合インタラクティブ・コンテント
src属性を持つ場合:0個以上の track要素に続きトランスペアレント。ただし子孫に media要素はNG。
src属性を持たない場合:0 個以上の source要素、0個以上の track要素に続きトランスペアレント。ただし子孫に media要素はNG。
b フロー・コンテント
フレージング・コンテント
フレージング・コンテント
base メタデータ・コンテント
bdi フロー・コンテント
フレージング・コンテント
フレージング・コンテント
bdo フロー・コンテント
フレージング・コンテント
フレージング・コンテント
要素名 (Alphabet順) カテゴリー コンテンツ・モデル
blockquote フロー・コンテント
セクショニング・ルート
フロー・コンテント
body セクショニング・ルート フロー・コンテント
br フロー・コンテント
フレージング・コンテント
button フロー・コンテント
フレージング・コンテント
インタラクティブ・コンテント
フレージング・コンテント 
ただし子孫にインタラクティブ・コンテントはNG。
canvas フロー・コンテント
フレージング・コンテント
エンベッディッド・コンテント
トランスペアレント
caption なし(tableの子要素) フロー・コンテント。
ただし、table 要素を子孫に入れることはNG。
cite フロー・コンテント
フレージング・コンテント
・フレージング・コンテント
code フロー・コンテント
フレージング・コンテント
フレージング・コンテント
colgroup なし(table 要素の子 ) span属性があれば空。
span属性無ければ0個以上のcol要素
col なし(span属性を持たない colgroup要素の子要素)
要素名 (Alphabet順) カテゴリー コンテンツ・モデル
data フロー・コンテント
フレージング・コンテント
フレージング・コンテント
datalist フロー・コンテント
フレージング・コンテント
フレージング・コンテント、または
0個以上の option要素、スクリプト-サポート要素(script、template要素)
dd なし(dlの子要素) フロー・コンテント
del フロー・コンテント
フレージング・コンテント
トランスペアレント
details フロー・コンテント
インタラクティブ・コンテント
セクショニング・ルート
1つの summary要素の後にフロー・コンテント
dfn フロー・コンテント
フレージング・コンテント
フレージング・コンテント
ただし、子孫に dfn要素はNG。
div フロー・コンテント フロー・コンテント
dl フロー・コンテント 1個以上のdt要素+1個以上のdd要素のセットを0個以上。必要ならスクリプト-サポート要素(script、template要素)
dt なし(dlの子要素) フレージング・コンテント
ただし、header、footer要素、セクショニング・コンテント、ヘディングコンテントは子孫に含まない
embed フロー・コンテント
フレージング・コンテント
エンベッディッド・コンテント
インタラクティブ・コンテント
em フロー・コンテント
フレージング・コンテント
フレージング・コンテント
要素名 (Alphabet順) カテゴリー コンテンツ・モデル
fieldset フロー・コンテント
セクショニング・ルート
オプションで legend要素を1つ、その後フロー・コンテント
figcaption なし(figureの最初または最後の子要素) フロー・コンテント
figure フロー・コンテント
セクショニング・ルート
フロー・コンテント
オプションで figcaption要素を含む
footer フロー・コンテント フロー・コンテント
ただし、子孫に main、header、footer要素を含むのはNG。
form フロー・コンテント フロー・コンテント。
ただし、子孫にform要素はNG。
h1〜h6 フロー・コンテント
ヘッディング・コンテント
フレージング・コンテント
header フロー・コンテント フロー・コンテント 
ただし、子孫に main、header、footer要素はNG。
head なし 1つ以上のメタデータ・コンテント。そのうち1個は title要素。base要素は複数不可
ただし、iframe要素の srcdoc属性の値として指定するHTML文書の場合や、タイトル情報が上位レベルのプロトコルで与えられる場合:0個以上のメタデータ・コンテント
hgroup
(WHATWGのみ)
フロー・コンテント
ヘッディング・コンテント
1個以上の h1〜h6、template要素
要素名 (Alphabet順) カテゴリー コンテンツ・モデル
hr フロー・コンテント
html なし head要素の後に body要素が続く
i フロー・コンテント
フレージング・コンテント
フレージング・コンテント
iframe フロー・コンテント
フレージング・コンテント
エンベッディッド・コンテント
インタラクティブ・コンテント
テキスト
img フロー・コンテント
フレージング・コンテント
エンベッディッド・コンテント
usemap属性を持つ場合インタラクティブ・コンテント
input フロー・コンテント
フレージング・コンテント
type属性が hiddenじゃない場合インタラクティブ・コンテント
ins フロー・コンテント
フレージング・コンテント
トランスペアレント
kbd フロー・コンテント
フレージング・コンテント
フレージング・コンテント
keygen フロー・コンテント
フレージング・コンテント
インタラクティブ・コンテント
label フロー・コンテント
フレージング・コンテント
インタラクティブ・コンテント
フレージング・コンテント。
ただし、子孫にlabel要素はNG。ラベルの対象になってないフォーム関連要素は入れられない。
要素名 (Alphabet順) カテゴリー コンテンツ・モデル
legend なし フレージング・コンテント
li なし(ul、ol要素の子要素) フロー・コンテント
link メタデータ・コンテント
main フロー・コンテント フロー・コンテント
map フロー・コンテント
フレージング・コンテント
トランスペアレント
mark フロー・コンテント
フレージング・コンテント
フレージング・コンテント
menu フロー・コンテント type属性がポップアップの場合:任意の順序で0個以上のmenuitem要素、0個以上のhr要素、タイプ属性がポップアップメニュー状態にある0個以上のmenu要素、0個以上のスクリプトサポート要素(script、template要素)
menuitem なし(menu要素の子要素)
meta メタデータ・コンテント
meter フロー・コンテント
フレージング・コンテント
フレージング・コンテント 
ただし、子孫に meter要素はNG。
nav フロー・コンテント
セクショニング・コンテント
フロー・コンテント
(ただし main要素は入らない)
noscript メタデータ・コンテント
フロー・コンテント
フレージング・コンテント
head要素内:link、style、meta要素を順不同で0個以上
head要素の外:トランスペアレント。ただしnoscript要素はNG。
要素名 (Alphabet順) カテゴリー コンテンツ・モデル
object フロー・コンテント
フレージング・コンテント
エンベッディッド・コンテント
0個以上の param要素に続けてトランスペアレント
ol フロー・コンテント 0個以上の li要素 と スクリプト-サポート要素(script、template要素)
optgroup なし 0個以上の option要素、スクリプト-サポート要素(script、template要素)
option なし label属性 value属性がある場合:空
label属性があり value属性が無い場合:テキスト
label属性が無い場合:テキスト
output フロー・コンテント
フレージング・コンテント
フレージング・コンテント
p フロー・コンテント フレージング・コンテント
param なし(object要素の子要素)
picture フロー・コンテント
フレージング・コンテント
0個以上の source要素のあとに1つの img要素。オプションでスクリプト-サポート要素(script、template要素)
pre フロー・コンテント フレージング・コンテント
progress フロー・コンテント
フレージング・コンテント
フレージング・コンテント。
ただし、子孫に progress要素はNG。
q フロー・コンテント
フレージング・コンテント
フレージング・コンテント
要素名 (Alphabet順) カテゴリー コンテンツ・モデル
rb なし フレージング・コンテント
rp なし フレージング・コンテント
rt なし フレージング・コンテント
rtc なし フレージング・コンテントか、rt または rp要素
ruby フロー・コンテント
フレージング・コンテント
詳細は [19] テキストにルビをつけてみよう
s フロー・コンテント
フレージング・コンテント
フレージング・コンテント
samp フロー・コンテント
フレージング・コンテント
フレージング・コンテント
script メタデータ・コンテント
フロー・コンテント
フレージング・コンテント
src属性無し:type属性の値に依存する。スクリプト。
src属性あり:空、またはスクリプト
section フロー・コンテント
セクショニング・コンテント
フロー・コンテント
select フロー・コンテント
フレージング・コンテント
インタラクティブ・コンテント
0個以上の option要素、optgroup要素、スクリプトサポート要素(script、template要素)
small フロー・コンテント
フレージング・コンテント
フレージング・コンテント
source なし
span フロー・コンテント
フレージング・コンテント
フレージング・コンテント
要素名 (Alphabet順) カテゴリー コンテンツ・モデル
strong フロー・コンテント
フレージング・コンテント
フレージング・コンテント
style メタデータ・コンテント type属性の値に依存する。スタイルシート
sub
sup
フロー・コンテント
フレージング・コンテント
フレージング・コンテント
summary なし フレージング・コンテントか、1つのヘディング・コンテント
table フロー・コンテント の順番で配置:
オプションで1つの caption要素、0個以上のcolgroup要素、オプションで1つの thead要素、0個以上の tbody要素か 1個以上の tr要素、オプションで tfoot要素、オプションで、任意の場所に 1 個以上のスクリプトサポート要素(script、template要素)
tbody なし 0個以上の tr要素、スクリプトサポート要素(script、template要素)
td セクショニング・ルート フロー・コンテント
template メタデータ・コンテント
フロー・コンテント
フレージング・コンテント
以下のいずれか:
メタデータコンテンツ
フローコンテンツ
olとul要素のコンテンツモデル
dl要素のコンテンツモデル
Figure要素のコンテンツモデル
ruby要素のコンテンツモデル
object要素のコンテンツモデル
video、audio要素のコンテンツモデル
table要素のコンテンツモデル
colgroup要素のコンテンツモデル
thead、tbody、tfoot要素のコンテンツモデル
tr要素のコンテンツモデル
fieldset要素のコンテンツモデル
select要素のコンテンツモデル
details要素のコンテンツモデル
type属性がポップアップメニューの状態にある menu要素のコンテンツモデル
textarea フロー・コンテント
フレージング・コンテント
インタラクティブ・コンテント
テキスト
tfoot なし 0個以上の tr要素、スクリプトサポート要素(script、template要素)
thead なし 0個以上の tr要素、スクリプトサポート要素(script、template要素)
要素名 (Alphabet順) カテゴリー コンテンツ・モデル
th なし フロー・コンテント
ただし、header、footer要素、セクショニング・コンテント、ヘディング・コンテントは子孫に入らない
time フロー・コンテント
フレージング・コンテント
datetime属性があればフレージング・コンテント。それ以外の場合は日時を表すテキスト
title メタデータ・コンテント テキスト(要素間のホワイトスペースを除く)
tr なし 0個以上の td、th要素、スクリプトサポート要素(script、template要素)
track なし
u フロー・コンテント
フレージング・コンテント
フレージング・コンテント
ul フロー・コンテント 0個以上の li要素 と スクリプト-サポート要素(script、template要素)
var フロー・コンテント
フレージング・コンテント
フレージング・コンテント
video フロー・コンテント
フレージング・コンテント
エンベッディッド・コンテント
controls属性を持つ場合インタラクティブ・コンテント
src属性を持つ場合:0個以上の track要素に続きトランスペアレント。ただし子孫に media要素はNG。
src属性を持たない場合:0 個以上の source要素、0個以上の track要素に続きトランスペアレント。ただし子孫に media要素はNG。
wbr フロー・コンテント
フレージング・コンテント

クリックでジャンプできます。

次回予告

次回はすべての要素に指定できる「グローバル属性」について見てみましょう。
属性は、ある特定の要素にしか付かないものもありますが、id属性、class属性、title属性など、どんな要素にも使える属性があり、これを「グローバル属性」といいます。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2018/07 | 08
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.