【HTML5】コンテンツモデルについて調べてみた

ふと「この要素って“ブロックレベル要素”だったかなぁ」とググっていると、

＼ コンテンツモデル ／

というワードが突如現れて、そして私のことを蔑んでいるような気がしました。そして私は「コンテンツモデル」について調べることにしました。

（笑）

コンテンツモデルとは

多分、いろいろ端折って言うと、
とある要素に入れることができる要素のルールみたいなもの、って感じでしょうか。、その考え方、概念ってよく言われているような気がします。

何言ってるかさっぱりわかりませんが、、

『p 要素には、div 要素は内包できない。なぜなら、そういう決まりだから。』というような決まり事の、その詳細のことだと思います。

ブロックレベル要素とインライン要素との関係

「コンテンツモデル」にたどり着く過程で、「ブロックレベル要素とインライン要素」を通ると思います。なのでここに書く必要はないと思いますが、形式的に書いておきたいと思います。

「ブロックレベル要素とインライン要素」は昔の概念で、今は「コンテンツモデル」という概念でヤッてるってことですね！「コンテンツモデル」は、HTML5 から導入された概念みたいです。

じゃあ「ブロックレベル要素とインライン要素」切り捨ててええんかって話ですが、私はそんなことは全然ないと思います。重なる部分もありますし、今でも通ずる部分がある知識なので、頭の片隅に引き出しとして残しておくのが良いかと思います。

ただし、上の世代の人から HTML を学ぶとき、間違った知識を教えられるかもしれないのでそこは注意ですね。意外とこの辺はさらっとしか勉強しませんし（たぶん）、独学の人も多いですもんね。（私もほぼ独学＆勉強中。）

コンテンツモデルとは
３段階に分けて
考えるとわりと理解できました。

大体コンテンツモデルを調べる人は『pにアレ入れられるんだっけ？』ってな感じの人が多いような気がします！かくいう私もその一人です。

さらっと調べて、いろいろやってると私のツルツルの脳みそがパニックをおこしてしまいましたので、ゆっくり考えた結果、3段階に分けて考えると理解しやすいのかなぁ思いましたので紹介します。

---

① 「コンテンツモデル」には、7つのカテゴリがある。

・Metadata content
・Flow content
・Sectioning content
・Heading content
・Phrasing content
・Embedded content
・Interactive content
（他にも隠されたカテゴリがあるらしい……。「Palpable content」……、それと後で触れますが「transparent」というのもあります。一応メモだけ。）

② 各 HTML 要素は、０～複数の「コンテンツモデル」のカテゴリに分類される。

例えば、body 要素や html 要素などはどのカテゴリにも属さず、a 要素は「Flow content」「Phrasing content」「Interactive content」コンテンツの3つのカテゴリに属しています。）

③ 各 HTML 要素は、内包することができる HTML 要素が決まっており、「コンテンツモデル」のカテゴリから検索することができる！

ちょっと回りくどい言い回しにしましたが、、要は、決まったコンテンツモデルの要素しか入れられないということを言いたかったです！『入れられるかなぁ入られないかなぁ』と調べる使い方しかしない私のような人にとってはこのほうが合っている言い回しなような気がしました。

---

①までは軽くググったらすぐに情報として手に入れられるのですが、②と③のことがごっちゃになった上に、よく咀嚼せずに、この後の項でも出てくる図を見て、勘違い＆勘違いでよくわからないことになってしましました。見直してみると別に難しいことじゃないですが、入り口の知識がないと理解するの難しいですよね、ヨネ！？

私が勘違いしていたこと

さて、「コンテンツモデル」について調べながらこの記事を書いていると、思わぬ思考の迷子になってしまいましたので書き記しておこうと思います。

コンテンツモデルの説明を見るとき、セットで下図を見かけますよね。（余談ですが、こういう図を概念図というらしいです。）

イメージ引用元：W3C

私は、この図は内包することができるカテゴリの図だと勘違いをしていました。

「body 要素内で使用される要素のほとんどが Flow カテゴリに属します」というような説明をよく見かけると思うのですが、バカな私は『、、、ということは a 要素は Flow なのになんで、divを入れられないの？』という感じで、パニックになってしまった。という感じです。

ちなみにこの図は、該当カテゴリに属する HTML 要素を表示するためのボタンみたいなものですかね。なので、ちゃんと Web 上で見なければ間違った解釈で伝わってしまうので注意が必要です！！

イメージ引用元：W3C

カーソルを乗せると、そのカテゴリに属する要素が表示されるという仕組みです。この図（モジュール）単体で知ることができるのは、各カテゴリに属する HTML 要素の種類と、カテゴリの重なりです。

でも本当に大切なのは、
自分が使いたい HTML 要素が内包することができる HTML 要素のカテゴリはなんなんだいっ！ってことですね！

各 HTML 要素が
内包できる HTML 要素の
コンテンツモデルのカテゴリを
調べる方法

（見出し長い！）

各 HTML 要素が内包できる HTML 要素のコンテンツモデルのカテゴリを調べる方法、という長い文章だとよくわからないので、、、いっそ例えて、さらに略してしまうと、

div 要素が、内包できる要素の調べ方！ってことです！

公式ページで各 HTML 要素を紹介しているページにアクセスして、「Content model:」のところに記載がある部分を参照します。

例えば div 要素なら、こちら

イメージ引用元：W3C

「Flow content」のカテゴリに属する HTML 要素を内包することができるということがわかりますね。

「Transparent 」コンテンツというカテゴリについて

例えば a 要素のコンテンツモデルを調べると「Transparent」という記載があります。これは先の項でも触れた“7つのカテゴリ”には入っていません。

では、一体何なんだってことですが、

親要素のコンテンツモデルがそのまま継承されるということを示しているようです。

はい。よくわかりません。

「Transparent」の性質をかみ砕くと、「Transparent」の要素の親要素のコンテンツモデルと同じになるという感じでしょうか。

親要素が div 要素であれば、div 要素の「Content model:」を参照すれば良いですね。div 要素は、「Flow contet」を内包することができるので、それを継承して a 要素も「Flow content」を内包することができるということです。

ただし、a 要素の「Transparent」には例外が記載されています。内包する HTML 要素は子孫に「interactive content」持てないという条件があるようです。代表的なのは、同じ a 要素や button 要素などです。「interactive content」の中でも（if~）と条件があるものもが結構あるみたいなので、一度目を通してみると良いかもしれません。（interactive content）

a 要素の中に a 要素を入れたら違和感を感じると思います。たいていの場合はそんな感じの要素が「interactive content」だと思いますので、違和感を感じたら調べてみるくらいの気持ちで問題なさそうな気がします。。

もっと簡単な
コンテンツモデルの調べ方

「HTML5 コンテンツモデル ガイド」というサイトで一発で調べることができます。

HTML5 コンテンツモデル ガイド

説明もセットで表示されるので、とても使い勝手が良いです。

じゃあ、なんで、長々と説明してきたのさっ！？って、公式を知ってたほうがなんか気持ちがいいじゃないですか！

まとめ

コンテンツモデルとは、各 HTML 要素が内包することができる HTML 要素は決まっており、そのHTML 要素を７つのカテゴリで分類して、ルール化した概念。といった感じでしょうか。

結局大切なのは、コンテンツモデルという概念があるということを知っていること。そしてその内容と調べ方ですね！

要素自身のカテゴリと、その要素が内包できるカテゴリは別物ということも抑えておきましょう。

また、全部覚える必要はないと、いろいろなサイトで見受けられます。代表的な要素は経験で体に染み込みますし、私自身は、そんなに思い詰めて勉強する必要な無いのかなぁ考えます。私は。

出典・参考文献

・W3C. 「3.2.5 Content models – HTML5」. https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html, 2024年4月4日閲覧。

・ウェブゴトBLOG. 「HTML5 コンテンツモデル ガイド」. http://webgoto.net/html5/, 2024年4月5日閲覧。