HTML5のコンテンツモデルについての備忘録 HTMLの基本編 vol.6

コンテンツモデルとは

HTML5より新しく導入された「コンテンツ・モデル」という定義。
コンテンツ・モデルとは一体何なのかというと、「■■■の要素には、●●●要素を入れ子にできる」といった、記述のルール(配置のルール)の事です。

コンテンツ・モデルの大半は前回説明したカテゴリー名で定義されていますが、特定の要素のみ配置可能透明(親要素のコンテンツ・モデルを引き継ぐ トランスペアレント)といった定義も存在します。

コンテンツ・モデルがカテゴリーで定義されている場合

要素ごとにカテゴリーに分類、またコンテンツ・モデルが定義されており、親要素が属しているカテゴリーの要素のみ入れ子にするこができます。

例えば、文章の段落を表す<p>要素のコンテンツ・モデルは「フレージング・コンテンツ」です。<p>~</p>の中に記述が可能(入れ子にできる要素)な要素は、フレージング・コンテンツに属している要素だけとなります。

記述(配置)の一例

<p>要素の中に強調を表す<em>要素(フレージング・コンテンツ)を配置した一例

<p>アラフォー未経験のおっさんの<em>奮闘記</em></p>

すぐには理解できない・覚えることは出来ないため、入れ子にする場合は親要素のコンテンツ・モデルを確認する必要があります。

コンテンツ・モデルが透明 トランスペアレントで定義されている場合

トランスペアレントとは、日本語に訳すと「透明な」という意味合いになります。これは、入れ子にする子要素が親要素のコンテンツモデルを受け継ぐことになります。

文章の説明だけでは分かりにくいので、リンクを生成する<a>要素を使用してサンプルコードを記載いたします。ちなみにリンク先にしているURLは本サイトのトップページです。

記述(配置)の一例

<p>
  <a href="https://manabu.kigaru.link/">奮闘記<em>WEBサイト</em>や<em>プログラミング</em>に挑戦</a>
</p>

上記のサンプルコードは、子要素に記述したトランスペアレントである<a>要素は、親要素の<p>要素のコンテンツ・モデルを受け継ぎます。

<p>要素のコンテンツ・モデルはフレージング・コンテンツですので、子要素に配置した<em>要素(フレージング・コンテンツ)は記述できます。

親要素・子要素の実例について

3回に分けて「入れ子」、「カテゴリー」、「コンテンツ・モデル」について解説してきました。

ここからはHTMLの記述において、よく使う要素を例にあげて、その要素に子要素として記述(配置)が可能な要素を紹介します。

div要素について

div要素のコンテンツ・モデルはフローコンテンツですので、子要素にはフローコンテンツに属する要素を入れ子にすることができます。

div要素の役割について

div要素は単体では意味を持ちませんが、<div>~</div>で囲うことで一つのグループ(ブロック)として扱うことができます。

div要素に入れることが可能な要素
a、abbr、address、、article、aside、audio、b、bdo、blockquote、br、button、canvas、cite、code、command、datalist、del、details、dfn、div、dl、em、embed、fieldset、figure、footer、form、h1、h2、h3、h4、h5、h6、header、hgroup、hr、i、iframe、img、input、ins、kbd、keygen、label、link、map、mark、math、menu、meta、meter、nav、noscript、object、ol、output、p、pre、progress、q、ruby、s、samp、script、section、select、small、
span、strong、style、sub、sup、svg、table、textarea、time、ul、var、video、wbrなど

span要素について

span要素のコンテンツ・モデルはフレージングコンテンツですので、子要素にはフレージングコンテンツに属する要素を入れ子にすることができます。

span要素の役割について

span要素はdiv要素と同じく単体では意味を持ちません。~で囲うことで一つのグループとして扱うことが出来る他、style属性・class属性などの属性と一緒に使用する場合に便利な要素です。

span要素に入れることが可能な要素
a、 abbr、 audio、 b、 bdi、 bdo、 br、 button、 canvas、 cite、 code、 data、 datalist、 del、 dfn、 em、 embed、 i、 iframe、 img、 input、 ins、 kbd、 keygen、 label、 map、 mark、 math、 meter、 noscript、 object、 output、 progress、 q、 ruby、 s、 samp、 script、 select、 small、 span、 strong、 sub、 sup、 svg、 template、 textarea、 time、 u、 var、 video、
wbrなど

h1、h2、h3、h4、h5、h6要素について

h1~h6要素のコンテンツ・モデルはフレージングコンテンツですので、子要素にはフレージングコンテンツに属する要素を入れ子にすることができます。

h1~h6要素の役割について

h1~h6要素は、文章の見出しを付ける時に使用します。数字が小さいほど重要度の高い見出しとなります。

h1~h6要素に入れることが可能な要素
a、 abbr、 audio、 b、 bdi、 bdo、 br、 button、 canvas、 cite、 code、 data、 datalist、 del、 dfn、 em、 embed、 i、 iframe、 img、 input、 ins、 kbd、 keygen、 label、 map、 mark、 math、 meter、 noscript、 object、 output、 progress、 q、 ruby、 s、 samp、 script、 select、 small、 span、 strong、 sub、 sup、 svg、 template、 textarea、 time、 u、 var、 video、
wbrなど

p要素について

p要素のコンテンツ・モデルはフレージングコンテンツですので、子要素にはフレージングコンテンツに属する要素を入れ子にすることができます。

p要素の役割について

p要素は文章の始まり~終わりのように一つの段落を表す時に使用します。

p要素に入れることが可能な要素
a、 abbr、 audio、 b、 bdi、 bdo、 br、 button、 canvas、 cite、 code、 data、 datalist、 del、 dfn、 em、 embed、 i、 iframe、 img、 input、 ins、 kbd、 keygen、 label、 map、 mark、 math、 meter、 noscript、 object、 output、 progress、 q、 ruby、 s、 samp、 script、 select、 small、 span、 strong、 sub、 sup、 svg、 template、 textarea、 time、 u、 var、 video、
wbrなど

em要素について

em要素のコンテンツ・モデルはフレージングコンテンツですので、子要素にはフレージングコンテンツに属する要素を入れ子にすることができます。

em要素の役割について

em要素は強調したい箇所に使用する要素です。強調したい場所が重要性を示す場合はstrong要素を使用します。ちなみにstrong要素もem要素同様にフレージングコンテンツの要素を入れ子にすることができます。

em要素に入れることが可能な要素
a、 abbr、 audio、 b、 bdi、 bdo、 br、 button、 canvas、 cite、 code、 data、 datalist、 del、 dfn、 em、 embed、 i、 iframe、 img、 input、 ins、 kbd、 keygen、 label、 map、 mark、 math、 meter、 noscript、 object、 output、 progress、 q、 ruby、 s、 samp、 script、 select、 small、 span、 strong、 sub、 sup、 svg、 template、 textarea、 time、 u、 var、 video、
wbrなど

ul、ol要素について

ul、ol要素ともに、子要素として記述可能な要素は<li>タグとなります。例外としてtemplateやscript要素は入れることはできます、滅多に使用することはありません。

ul、ol要素の役割について

ul要素は項目の順序に意味のない、箇条書きのようなリストを作成する時に使用します。ol要素は項目の順序に意味のある、ランキングなどのリストを作成する時に使用します。

ul、ol要素に入れることが可能な要素
li、 template、 script

li要素について

li要素のコンテンツモデルはフロー・コンテンツですので、子要素にはフロー・コンテンツに属する要素を入れ子にすることができます。

li要素の役割について

li要素はリストの項目を作成する時に使用します。

li要素に入れることが可能な要素
a、abbr、address、、article、aside、audio、b、bdo、blockquote、br、button、canvas、cite、code、command、datalist、del、details、dfn、div、dl、em、embed、fieldset、figure、footer、form、h1、h2、h3、h4、h5、h6、header、hgroup、hr、i、iframe、img、input、ins、kbd、keygen、label、link、map、mark、math、menu、meta、meter、nav、noscript、object、ol、output、p、pre、progress、q、ruby、s、samp、script、section、select、small、span、strong、style、sub、sup、svg、table、textarea、time、ul、var、video、wbrなど

table要素について

table要素に入れ子が可能な要素は下記の5つだけです。

table要素の役割について

table要素は表を作成する時に使用します。

table要素に入れることが可能な要素
tbody、thead、tfoot、caption、colgroup

tr要素について

tr要素に入れ子が可能な要素は下記の2つだけです。

tr要素の役割について

tr要素はtable要素の子要素として使用し、表の行を作成する時に使用します。

tr要素に入れることが可能な要素
th、td

th要素について

th要素のコンテンツ・モデルははフローコンテンツですので、フローコンテンツに属する要素を入れ子にすることができます。

th要素の役割について

th要素はtr要素の子要素として使用し、表のタイトルを表すセルを作成する時に使用します。タイトル以外のセルを作成する場合はtd要素を使用します。

th要素に入れることが可能な要素
a、abbr、address、area、article、aside、audio、b、bdo、blockquote、br、button、canvas、cite、code、command、datalist、del、details、dfn、div、dl、em、embed、fieldset、figure、footer、form、h1、h2、h3、h4、h5、h6、header、hgroup、hr、i、iframe、img、input、ins、kbd、keygen、label、link、map、mark、math、menu、meta、meter、nav、noscript、object、ol、output、p、pre、progress、q、ruby、s、samp、script、section、select、small、span、strong、sub、sup、svg、table、textarea、time、ul、var、video、wbrなど

今回はコンテンツ・モデルについて備忘録を残しました。最初は調べて記述しての繰り返しになるので、面倒ではありますが、慣れてくれば調べなくてもある程度分かってくるのではないかなぁと思います。

次からはようやブラウザに表示される部分の備忘録になります。

コメント

  1. […] HTML5のコンテンツモデルについての解説 HTMLの入れ子について HTMLの基本編 vol.4 HTML5のコンテンツモデルについての備忘録 HTMLの基本編 vol.6 […]

  2. […] この入れ子に関連する内容として「カテゴリー」と「コンテンツモデル」という定義があります。この内容を今回記載すると記述内容が多くなってしまいますので、次回に備忘録を残します。 […]

タイトルとURLをコピーしました