HTMLを学ぶ。コンテンツ・モデルと要素について知る。

HTMLを学ぶ。コンテンツ・モデルと要素について知る。

要素のルールについて

以前より要素について記述する方法を解説してきました。
それらの要素を記述する際は、いくつかのルールがあることを知っておく必要があります。
今回はこれらのルールを守りながら、以前から解説してきた要素を使って、更にステップアップしていこうと思います。

要素の配置ルールについて

これまで記述してきた要素は1つのみでした。
例えば以下のような感じです。

<p>はじめてHTMLを書いてみた</P>

これは以前解説したP要素ですね。
以前の記事を参考にしたい方は以下のページを参照下さい。

HTMLを学ぶ。文字化けを回避する方法。

この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要素を調べてみて下さい。

タグカテゴリーコンテンツモデル
pFlow/PalpablePhrasing

P要素のコンテンツ・モデルはPhrasing Content(フレージングコンテンツ)となっています。
ということは、P要素内にはPhrasing Content(フレージングコンテンツ)のみが使用できるということになります。

Phrasing Content(フレージングコンテンツ)にはどんな要素があったでしょうか。上記「カテゴリの種類と要素」から探してみて下さい。

これらがP要素内に記述することのできるタグです。
最初に解説したem要素もありますよね。

これで要素内に記述できる要素が理解できたでしょうか。
これらは使用していくうちに慣れていきますので、どんどん活用していきましょう。

次の記事

前回の記事

HTMLを学ぶ。シリーズはこちら

HTMLカテゴリの最新記事