カテゴリー

キーワード

 
> HTML5 カテゴリー、コンテン...

HTML5 カテゴリー、コンテンツモデル一覧表


2015 年 2 月 16 日 投稿    view: 3990
タグ:
このエントリーをはてなブックマークに追加

HTML5 カテゴリーとコンテンツ・モデル一覧表

こんにちは。

前回に引き続き、HTML5要素のカテゴリー、コンテンツ・モデルについて、です。

 

今回はカテゴリー、コンテンツ・モデルの一覧表です。

当然、これらをすべて把握する必要はありません。

特にHTML初心者の方は意識し過ぎると、ここでつまずくことになりますので、極論を言うと最初は無視してくださっても構いません。

 

「あれって、どうだったかな?」

「HTML4とどう違うのかな?」

そう思われたときに、この記事に戻って来て確認するくらいでいいと思います。

 

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

要素名 カテゴリー コンテンツ・モデル
a

■フロー・コンテンツ

インタラクティブ・コンテンツ

フレージング・コンテンツ(フレージング・コンテンツのみを含む場合

トランスペアレント

※子要素にインタラクティブ・コンテンツを含むことはできない。

abbr

フロー・コンテンツ

フレージング・コンテンツ

■フレージング・コンテンツ
address フロー・コンテンツ

■フロー・コンテンツ

※子孫にヘッディング・コンテンツ、セクショニング・コンテンツ、header 要素、footer 要素、address 要素を含んではならない。

area

フロー・コンテンツ

フレージング・コンテンツ

article

フロー・コンテンツ

セクショニング・コンテンツ

■フロー・コンテンツ
aside

フロー・コンテンツ

セクショニング・コンテンツ

■フロー・コンテンツ
audio

フロー・コンテンツ

フレージング・コンテンツ

エンベディッド・コンテンツ

※controls属性を持つときはインタラクティブ・コンテンツ

■src属性を持つ:トランスペアレント。ただし子孫にmedia要素は含むことができない。

■src属性を持たない:0個以上の source要素に続き、トランスペアレント。ただし子孫にmedia要素は含むことができない

b

フロー・コンテンツ

フレージング・コンテンツ

■フレージング・コンテンツ
base メタデータ・コンテンツ
bdi

フロー・コンテンツ

■フレージング・コンテンツ

■フレージング・コンテンツ
bdo

フロー・コンテンツ

■フレージング・コンテンツ

■フレージング・コンテンツ
blockquote

■フロー・コンテンツ

■セクショニング・ルート

■フロー・コンテンツ
body ■セクショニング・ルート ■フロー・コンテンツ
br

■フロー・コンテンツ

■フレージング・コンテンツ

button

■フロー・コンテンツ

■フレージング・コンテンツ

■インタラクティブ・コンテンツ

■フレージング・コンテンツ

※インタラクティブ・コンテンツは子孫に含むことができない。

canvas

■フロー・コンテンツ

■フレージング・コンテンツ

■エンベディッド・コンテンツ

■トランスペアレント
caption

なし

(tableの子要素)

■フロー・コンテンツ

※table要素を子孫に含むことはできない。

cite

■フロー・コンテンツ

■フレージング・コンテンツ

■フレージング・コンテンツ
code

■フロー・コンテンツ

■フレージング・コンテンツ

■フレージング・コンテンツ
colgroup

なし

(tableの子要素)

■span属性があるときは空。

■span属性がないときは0個以上のcol要素。

col

なし

(span属性を持たないcolgroup要素の子要素)

datalist

■フロー・コンテンツ

■フレージング・コンテンツ

■フレージング・コンテンツ

■0個以上のoption要素

dd なし(dlの子要素)  
del

■フロー・コンテンツ

■フレージング・コンテンツ(フレージング・コンテンツのみを含む場合

■トランスペアレント
details

■フロー・コンテンツ

■インタラクティブ・コンテンツ

■セクショニング・ルート

■1つのsummary要素、その後にフロー・コンテンツ
dfn

■フロー・コンテンツ

■フレージング・コンテンツ

■フレージング・コンテンツ

※子孫dfn要素は含むことができない。

div ■フロー・コンテンツ ■フロー・コンテンツ
dl ■フロー・コンテンツ ■1つ以上のdt要素と、それに続く1つ以上のdd要素のグループを0個以上
dt

なし

(dlの子要素)

■フレージング・コンテンツ
embed

■フロー・コンテンツ

■フレージング・コンテンツ

■エンベディッド・コンテンツ

■インタラクティブ・コンテンツ

em

■フロー・コンテンツ

■フレージング・コンテンツ

■フレージング・コンテンツ
fieldset

■フロー・コンテンツ

■セクショニング・ルート

■任意で1つのlegend要素と、その後にフロー・コンテンツ
figcaption

なし

figure要素の最初または最後の子要素として用いられる

■フロー・コンテンツ

 

 

figure

■フロー・コンテンツ

■セクショニング・ルート

figcaption要素を使用する場合は、figure要素内の最初か最後のどちらかにのみ(1つだけ)配置することができる
footer ■フロー・コンテンツ

■フロー・コンテンツ

※子孫にheader要素とfooter要素を含むことができない。

form ■フロー・コンテンツ

■フロー・コンテンツ

※子孫にform要素を含むことができない。

h1~h6

■フロー・コンテンツ

■ヘディング・コンテンツ

■フレージング・コンテンツ
head なし(html要素の最初の子要素として用いられる)

■1つ以上のメタデータ・コンテンツが必要かつ、そのうち1つはtitle要素でなくてはならない。

1つがtitle要素でなくてはならないことの例外は、

・iframe要素のsrcdoc属性に記述された文書の場合

・HTMLメールとして作成された文書で、メールそのものに件名が指定されている場合。

 

header ■フロー・コンテンツ

■フロー・コンテンツ

※子孫にheader要素とfooter要素を含むことができない。

hr ■フロー・コンテンツ
html なし(文書のルート) head要素、body要素の順で1つずつ
i

■フロー・コンテンツ

■フレージング・コンテンツ

■フレージング・コンテンツ
iframe

■フロー・コンテンツ

■フレージング・コンテンツ

■エンベディッド・コンテンツ

■インタラクティブ・コンテンツ

テキスト

※HTML5では無意味なテキストとして扱われる

img

■フロー・コンテンツ

■フレージング・コンテンツ

■エンベディッド・コンテンツ

※usemap属性を持つときは、インタラクティブ・コンテンツ

input

■フロー・コンテンツ

■フレージング・コンテンツ

※type属性がhiddenではないとき、インタラクティブ・コンテンツ

ins

■フロー・コンテンツ

※フレージング・コンテンツのみを含むとき、フレージング・コンテンツ

■トランスペアレント
kbd

■フロー・コンテンツ

■フレージング・コンテンツ

■フレージング・コンテンツ
keygen

■フロー・コンテンツ

■フレージング・コンテンツ

■インタラクティブ・コンテンツ

label

■フロー・コンテンツ

■フレージング・コンテンツ

■インタラクティブ・コンテンツ

■フレージング・コンテンツ

※そのラベルの対象でないラベル付け可能なフォーム関連要素とlabel要素は含められない

legend

なし

(fieldset要素の最初の子要素として用いられる)

■フレージング・コンテンツ
li

なし

(ul要素、ol要素、menu要素の子要素として用いられる)

■フロー・コンテンツ
link ■メタデータ・コンテンツ
map

■フロー・コンテンツ

※フレージング・コンテンツのみを含むとき、フレージング・コンテンツ

■トランスペアレント
mark

■フロー・コンテンツ

■フレージング・コンテンツ

■フレージング・コンテンツ
menu

■フロー・コンテンツ

■type属性がtoolbarの場合、インタラクティブ・コンテンツ

■0個以上のli要素、もしくはフロー・コンテンツ

meta ■メタデータ・コンテンツ

meter

■フロー・コンテンツ

■フレージング・コンテンツ

■フレージング・コンテンツ

※子孫にmeter要素を含むことはできない。

nav

■フロー・コンテンツ

■セクショニング・コンテンツ

■フロー・コンテンツ
noscript

■フロー・コンテンツ

■メタデータ・コンテンツ

■フレージング・コンテンツ

head要素内:link要素、style要素、meta要素を0個以上(順不同)

body要素内:トランスペアレント(親要素のコンテンツモデルを継承)

object

■フロー・コンテンツ

■フレージング・コンテンツ

■エンベディッド・コンテンツ

※usemap属性があるとき、インタラクティブ・コンテンツ

■param要素を0個以上、その後にトランスペアレント(親要素のコンテンツモデルを継承)
ol ■フロー・コンテンツ ■0個以上のli要素
optgroup

なし

(select要素の子要素として用いられる)

■0個以上のoption要素
option

なし

(select要素、optgroup要素,datalist要素の子要素として用いられる)

■テキスト
output

■フロー・コンテンツ

■フレージング・コンテンツ

■フレージング・コンテンツ
p ■フロー・コンテンツ ■フレージング・コンテンツ
param なし(object要素の子要素として用いられる。フロー・コンテンツより前で)
pre ■フロー・コンテンツ ■フレージング・コンテンツ
progress

■フロー・コンテンツ

■フレージング・コンテンツ

■フレージング・コンテンツ

※子孫にprogress要素は含むことができない。

q

■フロー・コンテンツ

■フレージング・コンテンツ

■フレージング・コンテンツ
rp

なし

ruby要素の子要素として用いられる。rt要素の前後

■フレージング・コンテンツ
rt

なし

ruby要素の子要素として用いられる

■フレージング・コンテンツ
ruby

■フロー・コンテンツ

■フレージング・コンテンツ

■フレージング・コンテンツ

※フレージング・コンテンツの後に1つのrt要素を配置したグループ、もしくはフレージング・コンテンツの後にrp要素、rt要素、rp要素を配置したグループのどちらか一方を必ず含まなければならない。

samp

■フロー・コンテンツ

■フレージング・コンテンツ

■フレージング・コンテンツ
script

■フロー・コンテンツ

■メタデータ・コンテンツ

■フレージング・コンテンツ

■src属性がある:空、またはスクリプトの説明(コメント)

src属性がない:スクリプトのコード

section

■フロー・コンテンツ

■セクショニング・コンテンツ

■フロー・コンテンツ
select

■フロー・コンテンツ

■フレージング・コンテンツ

■インタラクティブ・コンテンツ

■0個以上のoption要素かoptgroup要素
small

■フロー・コンテンツ

■フレージング・コンテンツ

■フレージング・コンテンツ
source

なし

(video要素またはaudio要素の子要素として用いられる。ただし、フロー・コンテンツやtrack要素より前)

span

■フロー・コンテンツ

■フレージング・コンテンツ

■フレージング・コンテンツ
strong

■フロー・コンテンツ

■フレージング・コンテンツ

■フレージング・コンテンツ
style

■メタデータ・コンテンツ

※scoped属性があるときは、フロー・コンテンツ

スタイルシートのコード
sub

■フロー・コンテンツ

■フレージング・コンテンツ

■フレージング・コンテンツ
sup

■フロー・コンテンツ

■フレージング・コンテンツ

■フレージング・コンテンツ
summary

なし

(details要素の最初の子要素として用いられる)

■フレージング・コンテンツ
table ■フロー・コンテンツ

以下の順番で配置

1.caption要素を1つ(任意)

2.colgroup要素を0個以上

3.thead要素を1つ(任意)

4.tfoot要素を1つ(任意)

5.tbody要素を0個以上、またはtr要素を1つ以上

6.tfoot要素を1つ(任意)

tbody

なし

(table要素の子要素として用いられる。ただしcaption要素、colgroup要素、thead要素より後で、かつtable要素の子要素となるtr要素がないこと)

■0個以上のtr要素
td ■セクショニング・ルート ■フロー・コンテンツ
textarea

■フロー・コンテンツ

■フレージング・コンテンツ

■インタラクティブ・コンテンツ

■テキスト
th

なし

(tr要素の子要素として用いられる)

■フレージング・コンテンツ
tfoot

なし

(table要素の子要素として1つのみただし、caption要素、colgroup要素、thead要素より後で、かつtbody要素、tr要素よりも前、または一番最後)

■0個以上の tr要素
thead

なし

(table要素の子要素として1つのみ。ただし、caption要素、colgroup要素より後で、かつtbody要素、tfoot要素、tr要素よりも前)

■0個以上の tr要素
time

■フロー・コンテンツ

■フレージング・コンテンツ

■フレージング・コンテンツ

 

title ■メタデータ・コンテンツ ■テキスト
tr

なし

thead要素の子要素として / tbody要素の子要素として / tfoot要素の子要素として / table要素の子要素として用いられる。

ただし、caption要素、colgroup要素、thead要素よりも後で、かつtable要素の子要素となるtbody要素がないこと)

■0個以上のtd要素かth要素
track

なし

(video要素またはaudio要素の子要素として。ただし、フロー・コンテンツよりも前)

ul ■フロー・コンテンツ ■0個以上のli要素
var

■フロー・コンテンツ

■フレージング・コンテンツ

フレージング・コンテンツ
video

■フロー・コンテンツ

■フレージング・コンテンツ

■エンベディッド・コンテンツ

※controls属性を持つとき、インタラクティブ・コンテンツ

src属性がある:0個以上のtrack要素、その後にトランスペアレント(親要素のコンテンツモデルを継承) 

src属性がない:0個以上のsource要素、その後に0個以上のtrack要素、その後にトランスペアレント

※いずれもvideo要素とaudio要素は含められない

wbr

■フロー・コンテンツ

■フレージング・コンテンツ

 

 

まとめ

 

次回からはより実践的なものをご紹介したいと思います。

最後までお読みいただきありがとうございました。

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事