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

要素のルールについて

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

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

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

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

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

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

このP要素内にem要素を追加してみます。

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

それでは、em要素を記述する前後を見てみましょう。

このem要素は強調という意味を持っている要素なので、このように表示されます。
このように要素内に要素を入れて記述することで、文字に様々な表現を加えたり、意味を持たせることが可能となります。

コンテンツ・モデルについて

それでは要素の配置について解説していきます。
HTMLの各要素は自分の中に配置できる要素が決まっています。
そしてこの中に配置できる要素のことをコンテンツ・モデルといいます。

カテゴリの種類と要素

コンテンツ・モデルは７つのカテゴリで分類されています。
カテゴリについては以下の通りです。

• 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タグは７つのカテゴリに分類される。”です。
そして今回の本題であるコンテンツ・モデルです。一部のタグを以下の表にまとめておきました。

コンテンツ・モデルを調ベて使ってみる

ではP要素のコンテンツ・モデルを調べて、中に入る（入れられる）要素を調べてみましょう。上記一覧からP要素を調べてみて下さい。

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

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

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

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

次の記事

前回の記事

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