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

最終更新日:2015年01月30日  (初回投稿日:2012年02月27日)

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

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

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

この一覧は、2012年にまとめたものです。
HTML5.0で標準仕様になると「予定」されているモノも入っています。

*HTML5.0 の仕様から除外され、5.1の策定にも入っていない<command>要素は削除しました。
 <command>要素のかわりに<menuitem>要素が策定中だそうです。(2015年1月追記)

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

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

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

次回予告

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

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

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

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

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
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.