要素のルールについて
以前より要素について記述する方法を解説してきました。
それらの要素を記述する際は、いくつかのルールがあることを知っておく必要があります。
今回はこれらのルールを守りながら、以前から解説してきた要素を使って、更にステップアップしていこうと思います。
要素の配置ルールについて
これまで記述してきた要素は1つのみでした。
例えば以下のような感じです。
<p>はじめてHTMLを書いてみた</P>
これは以前解説したP要素ですね。
以前の記事を参考にしたい方は以下のページを参照下さい。
このP要素内にem要素を追加してみます。
<p><em>はじめてHTMLを書いてみた</em></P>
それでは、em要素を記述する前後を見てみましょう。

このem要素は強調という意味を持っている要素なので、このように表示されます。
このように要素内に要素を入れて記述することで、文字に様々な表現を加えたり、意味を持たせることが可能となります。
コンテンツ・モデルについて
それでは要素の配置について解説していきます。
HTMLの各要素は自分の中に配置できる要素が決まっています。
そしてこの中に配置できる要素のことをコンテンツ・モデルといいます。
カテゴリの種類と要素
コンテンツ・モデルは7つのカテゴリで分類されています。
カテゴリについては以下の通りです。
- Metadata Content(メタデータコンテンツ)
- Flow Content(フローコンテンツ)
- Sectioning Content(セクショニングコンテンツ)
- Heading Content(ヘディングコンテンツ)
- Phrasing Content(フレージングコンテンツ)
- Embedded Content(エンベディッドコンテンツ)
- Interactive Content(インタラクティブコンテンツ)
各要素をカテゴリー名別にまとめたものが、以下の通りとなります。
Metadata Content(メタデータコンテンツ)の要素
「メタデータコンテンツ」は、文書内のコンテンツの表示や動作を指定したり、ドキュメントの関連性を指定したり、文書のメタ情報などを指定したりする要素です。
base、link、meta、noscript、script、style、template、title要素
Flow Content(フローコンテンツ)の要素
body要素内で使われるほとんどの要素は「フローコンテンツ」に分類されます。
a、abbr、address、area、article、aside、audio、b、bdi、bdo、blockquote、br、button、canvas、cite、code、command、data、datalist、del、details、dfn、dialog、div、dl、embed、em、fieldset、figure、footer、form、h1〜h6、header、hgroup、hr、i、iframe、img、input、ins、kbd、keygen、label、main、map、mark、menu、meter、nav、noscript、ol、output、p、picture、pre、progress、q、ruby、s、samp、script、section、select、small、span、strong、sub、sup、table、template、textarea、time、u、ul、var、video、wbr要素
Sectioning Content(セクショニングコンテンツ)の要素
「セクショニングコンテンツ」は、明示的にアウトラインを生成する要素です。各セクショニングコンテンツは通常、見出しを伴って使用されます。
article、aside、nav、section要素
Heading Content(ヘディングコンテンツ)の要素
「ヘディングコンテンツ」は、セクションの見出しを定義する要素です。また、暗黙的にアウトラインを生成します。
h1、h2、h3、h4、h5、h6要素
Phrasing Content(フレージングコンテンツ)の要素
「フレージングコンテンツ」は、文書を構成するテキストを表す要素です。従来のHTMLでインライン要素と呼ばれていた分類に相当します。
a、abbr、area、audio、b、bdi、bdo、br、button、canvas、cite、code、command、data、datalist、del、dfn、embed、em、i、iframe、img、input、ins、kbd、keygen、label、map、mark、meter、noscript、object、output、progress、q、ruby、s、samp、script、select、small、span、strong、sub、sup、textarea、time、u、var、video、wbr、picture、templatey要素
Embedded Content(エンベディッドコンテンツ)の要素
「エンベディッドコンテンツ」は、文書に他のリソースなどを埋め込む要素です。
audio、canvas、embed、iframe、img、object、video、picture要素
Interactive Content(インタラクティブコンテンツ)の要素
「インタラクティブコンテンツ」は、閲覧者が操作する要素です。
a、audio、button、details、embed、iframe、img、input、keygen、label、menu、object、select、textarea、video要素
コンテンツ・モデル一覧
カテゴリについては理解できたでしょうか。
ポイントは”HTMLタグは7つのカテゴリに分類される。”です。
そして今回の本題であるコンテンツ・モデルです。一部のタグを以下の表にまとめておきました。
タグ | カテゴリー | コンテンツモデル |
html | - | head(最初の要素)/body(headの次) |
head | - | base/link/meta/noscript/script/style/template/title |
title | Metadata | スペースではないテキスト |
base | Metadata | - |
link | Metadata | - |
※Flow content、Phrasing contentの場合、body内でも使用可能 |
|
|
meta | Metadata/Flow(itemprop属性が存在する場合)/Phrasing(itemprop属性が存在しない場合) | - |
style | Metadata | スタイルを設定できるテキスト(CSSならOKということかと) |
body | Sectioning-root | Flow |
article | Flow/Sectioning/Palpable | Flow |
section | Flow/Sectioning/Palpable | Flow |
nav | Flow/Sectioning/Palpable | Flow |
aside | Flow/Sectioning/Palpable | Flow |
h1-h6 | Flow/Heading/Palpable | Phrasing |
hgroup | Flow/Heading/Palpable | h1-h6(h1-h6のいずれかを1つ以上)/script/template |
header | Flow/Palpable | Flow(子孫にheader、footerは不可) |
footer | Flow/Palpable | Flow(子孫にheader、footerは不可) |
address | Flow/Palpable | Flow(heading content、sectioning content、子孫にheader、footer、addressは不可) |
p | Flow/Palpable | Phrasing |
pre | Flow/Palpable | Phrasing |
blockquote | Flow/Sectioning-root/Palpable | Flow |
ol | Flow/Palpable(子に一つでもli要素を含む場合) | li/script/template |
ul | Flow/Palpable(子に一つでもli要素を含む場合) | li/script/template |
menu | Flow/Palpable(子に一つでもli要素を含む場合) | li/script/template |
li | - | Flow |
dl | Flow/Palpable(子に一つでも名前、値のグループを含む場合) | dt/dl/script/template/div() |
dt | - | Flow(header、footer、heading content、sectioning contentは不可) |
dd | - | Flow |
figure | Flow/Sectioning-root/Palpable | Flow/figcaption() |
figcaption | - | Flow |
main | Flow/Palpable | Flow |
div | Flow/Palpable | dt(dl要素の子の場合)/dd(dl要素の子の場合)/script(dl要素の子の場合)/template(dl要素の子の場合)/Flow(dl要素の子ではない場合) |
a | Flow/Phrasing/Interactive(要素がhref属性を持つ場合)/Palpable | Transparent(Interactive、子孫にa要素は不可) |
em | Flow/Phrasing/Palpable | Phrasing |
strong | Flow/Phrasing/Palpable | Phrasing |
small | Flow/Phrasing/Palpable | Phrasing |
s | Flow/Phrasing/Palpable | Phrasing |
cite | Flow/Phrasing/Palpable | Phrasing |
q | Flow/Phrasing/Palpable | Phrasing |
dfn | Flow/Phrasing/Palpable | Phrasing(dfnは不可) |
abbr | Flow/Phrasing/Palpable | Phrasing |
ruby | Flow/Phrasing/Palpable | Phrasing(rubyは子孫ともに不可)/ruby(単一のみ可)/rt(1つ以上)/rp(1つ以上のrtが続くrpでそれぞれがrpに続く) |
rt | - | Phrasing |
rp | - | テキスト |
data | Flow/Phrasing/Palpable | Phrasing |
time | Flow/Phrasing/Palpable | Phrasing(datetime属性をもつ場合)/テキスト(決められた形式がある) |
code | Flow/Phrasing/Palpable | Phrasing |
var | Flow/Phrasing/Palpable | Phrasing |
samp | Flow/Phrasing/Palpable | Phrasing |
kbd | Flow/Phrasing/Palpable | Phrasing |
sub | Flow/Phrasing/Palpable | Phrasing |
sup | Flow/Phrasing/Palpable | Phrasing |
i | Flow/Phrasing/Palpable | Phrasing |
b | Flow/Phrasing/Palpable | Phrasing |
u | Flow/Phrasing/Palpable | Phrasing |
mark | Flow/Phrasing/Palpable | Phrasing |
bdi | Flow/Phrasing/Palpable | Phrasing |
bdo | Flow/Phrasing/Palpable | Phrasing |
span | Flow/Phrasing/Palpable | Phrasing |
br | Flow/Phrasing/Palpable | Phrasing |
wbr | Flow/Phrasing | - |
ins | Flow/Phrasing/Palpable | Transparent |
del | Flow/Phrasing | Transparent |
picture | Flow/Phrasing/Embedded | source/img(sourceの次にくる)/script/template |
source | - | - |
img | Flow/Phrasing/Embedded/Form-associated-element/Interactive(usemap属性を持つ場合)/Palpable | - |
iframe | Flow/Phrasing/Embedded/Interactive/Palpable | - |
embed | Flow/Phrasing/Embedded/Interactive/Palpable | - |
object | Flow/Phrasing/Embedded/Interactive(usemap属性を持つ場合)/Listed/submittable/form-associated element/Palpable | param/transparent |
param | - | - |
video | Flow/Phrasing/Embedded/Interactive(controls属性を持つ場合)/Palpable | track(src属性を持つ場合。次にtransparent、ただし子孫にmediaは不可)/source(src属性を持たない場合。次にtrack、その次にtransparent、ただし子孫にmediaは不可) |
audio | Flow/Phrasing/Embedded/Interactive(controls属性を持つ場合)/Palpable(controls属性を持つ場合) | track(src属性を持つ場合。次にtransparent、ただし子孫にmediaは不可)/source(src属性を持たない場合。次にtrack、その次にtransparent、ただし子孫にmediaは不可) |
track | - | - |
map | Flow/Phrasing/Palpable | Transparent |
area | Flow/Phrasing | - |
table | Flow/Palpable | caption/colgroup(caption以降)/thead(colgroup以降)/tbody(thead以降)/tr(thead以降)/tfoot(tbody、tr以降)/script/template |
caption | - | Flow(子孫にtableは不可) |
colgroup | - | -(span属性が存在する場合)/col(span属性が存在しない場合)/template(span属性が存在しない場合) |
col | - | - |
tbody | - | tr(1つ以上)/script/template |
thead | - | tr(1つ以上)/script/template |
tfoot | - | tr(1つ以上)/script/template |
tr | - | td(td、th1つ以上)/th(td、th1つ以上)/script/template |
td | Sectioning-root | Flow |
th | - | Flow(子孫にheader,footer,sectioning content,heading contentは不可) |
form | Flow/Palpable | Flow(子孫にformは不可) |
label | Flow/Phrasing/Interactive/Palpable | Phrasing() |
input | Flow/Phrasing/Interactive(type属性がhiddenではない場合)/Listed/labelable(type属性がhiddenではない場合)/submittable/resettable/autocapitalize-inheriting form-associated element/Palpable(type属性がhiddenではない場合) | - |
button | Flow/Phrasing/Interactive/Listed/labelable/submittable/autocapitalize-inheriting form-associated element/Palpable | Phrasing(子孫にInteractive contentは不可) |
select | Flow/Phrasing/Interactive/Listed/labelable/submittable/resettable/autocapitalize-inheriting form-associated element/Palpable | option/optgroup/script/template |
datalist | Flow/Phrasing | Phrasing(またはoption)/option(またはPhrasing)/script/template |
datalist | Flow/Phrasing | Phrasing(またはoption)/option(またはPhrasing)/script/template |
optgroup | - | option/script/template |
textarea | Flow/Phrasing/Interactive/Listed/labelable/submittable/resettable/autocapitalize-inheriting form-associated element/Palpable | テキスト |
output | Flow/Phrasing/Listed/labelable/resettable/autocapitalize-inheriting form-associated element/Palpable | Phrasing |
progress | Flow/Phrasing/Labelable element/Palpable | Phrasing(子孫にprogressは不可) |
meter | Flow/Phrasing/Labelable element/Palpable | Phrasing(子孫にmeterは不可) |
fieldset | Flow/Sectioning-root/Listed/autocapitalize-inheriting form-associated element/Palpable | legend(Flow contentに続く) |
legend | - | Phrasing |
details | Flow/Sectioning-root/Interactive/Palpable | summary/Flow(summaryに続く) |
summary | - | Phrasing(またはheading)/heading(1つの要素。またはPhrasing) |
dialog | Flow/Sectioning-root | Flow |
script | Metadata/Flow/Phrasing/Script-supporting-element | ・・・ |
noscript | Metadata/Flow/Phrasing | ・・・ |
template | Metadata/Flow/Phrasing/Script-supporting-element | - |
slot | Flow/Phrasing | Transparent |
canvas | Flow/Phrasing/Embedded/Palpable | Transparent() |
コンテンツ・モデルを調ベて使ってみる
ではP要素のコンテンツ・モデルを調べて、中に入る(入れられる)要素を調べてみましょう。上記一覧からP要素を調べてみて下さい。
タグ | カテゴリー | コンテンツモデル |
p | Flow/Palpable | Phrasing |
P要素のコンテンツ・モデルはPhrasing Content(フレージングコンテンツ)となっています。
ということは、P要素内にはPhrasing Content(フレージングコンテンツ)のみが使用できるということになります。
Phrasing Content(フレージングコンテンツ)にはどんな要素があったでしょうか。上記「カテゴリの種類と要素」から探してみて下さい。

これらがP要素内に記述することのできるタグです。
最初に解説したem要素もありますよね。
これで要素内に記述できる要素が理解できたでしょうか。
これらは使用していくうちに慣れていきますので、どんどん活用していきましょう。
次の記事
前回の記事
HTMLを学ぶ。シリーズはこちら