本記事は、2025年5月21日に内容を見直してリライトしました。（2024年4月4日に初投稿。）
HTML をカキカキしているときに、ふと『この要素って“ブロックレベル要素”だったかなぁ……』という考えが頭に浮かびます。
そうして、
ググってみると……
＼ コンテンツモデル ／
そんなワードが突如現れて、
私のことを見下してくるのです。
そして私は「コンテンツモデル」について調べることにしました。
（笑）
目次
コンテンツモデルって何？
めっちゃ
ざっくり説明すると、
『とある HTML 要素に、どんな HTML 要素を入れてよいのか、いけないのか』というルールがあります。例として p 要素で見てみましょう。
・p 要素は、a 要素を内包できる。
・p 要素は、div 要素を内包できない。
・p 要素は、img 要素を内包できる。
なぜなら、
そういう決まりだから！
そう！
その決まり事、考え方、概念みたいなもんが「コンテンツモデル」っていうわけよ！
少し堅苦しく言えば、
『子要素として何が許されるか（あるいは許されないか）』というルールや、その分類（フローコンテンツ、インタラクティブコンテンツ、など※）を仕様レベルで定義したものが「コンテンツモデル」です。
※ 後述でやるので今は気にせずに。
Each element defined in this specification has a content model: a description of the element’s expected contents.
An HTML element must have contents that match the requirements described in the element’s content model. The contents of an element are its children in the DOM.
HTML Living Standard
原文だと、言い回しが英文的なので、少し理解するのが難しいですね……。
コンテンツモデルは
３段階で考える
では、コンテンツモデルのルールの概要についてすこし触れてみたいと思います。すべてを網羅するのはこの記事では厳しいので、ざっくりと紹介します。
３段階で考えると、わかりやすいかもしれません。
① 「コンテンツモデル」には、7つのカテゴリがある
■Content models（コンテンツモデル）の７つのカテゴリ
・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（※href 属性を持つ場合）」、そして「Palpable content」といった複数のカテゴリに属します。
③ 各 HTML 要素がどんな子要素を内包できるかは、「コンテンツモデル」のカテゴリで整理されている
例えば、p 要素が子要素として内包できる要素は、「Phrasing content」カテゴリに属する要素です。
そして、そのカテゴリに属する要素の代表例としては、a 要素や img 要素です。
p 要素が a 要素や img 要素を内包しているコードは、すこしでも HTML に触れたことがある人であれば容易にイメージできて、そしてそれが間違いではないということは直感的にわかりますよね！
上記の ① は、軽くググったらすぐに情報として手に入れられると思います。しかし、② と ③ の情報については、初心者のうちはなかなか整理できないと思います。
理解してしまえば、別にどうということはないのですが、知識がないうちは何が何だかさっぱりわからないですよね……。
“ブロックレベル要素とインライン要素”との関係
「コンテンツモデル」という存在を知る前に、HTML 要素の子要素として何が入れられるかを考える場合に“ブロックレベル要素とインライン要素”って言葉、思い浮かびませんでしたか？
実はその考えは「コンテンツモデル」の前身にあたるような考えなのです！
“ブロックレベル要素とインライン要素”を超簡単に説明すると、例えば、
・div 要素はブロックレベル要素
・a 要素はインライン要素
・img 要素はインライン要素
みたいな感じで、分類されていて、
→ブロックレベル要素は、インライン要素を内包できる
→インライン要素は、ブロックレベル要素を内包できない
→インライン要素は、インライン要素を内包できる
みたいなルールがありました。しかし、HTML や Web の技術が発展していく中で、やがてこのルールでは限界がきて、より細やかで柔軟な「コンテンツモデル」という考え方が登場したんですね
今では div 要素を a 要素で囲って、でっかいリンクにするなんてこと、当たり前にすると思います。そうなると上のルールではなかなか説明がややこしくなりますよね。つまりはそういうことです！
歴史的な流れを見てみると上の考え方は HTML4.01 まで存在したものです。そして時は流れ、HTML5 になり「コンテンツモデル」という考え方が登場しました。そして、現在の HTML Living Standard でも引き続き採用されているという感じです。
『じゃあ“ブロックレベル要素とインライン要素”の考え方はいらないの？』って思うかもしれませんが……私はそんなことは全然ないと思います。考え方で重なる部分もありますし、今でも通ずる部分がある知識なので、頭の片隅に引き出しとして残しておくのが良いかと思います。
ただし、
上の世代の人から HTML を学ぶとき、間違った知識を教えられるかもしれないのでそこは注意ですね。この辺は意外とさらっと流しがちだし、独学の人も多いからこそ、間違った知識のまま覚えちゃうこともあるかもですね。（私もほぼ独学＆勉強中）
コンテンツモデルの概念図
「コンテンツモデル」を調べると、よくセットで下図のようなものを見かけますよね。（余談ですが、こういう図を概念図というらしいです。）
イメージ引用元：HTML Living Standard
私はこの図の見方を勘違いしていました。外側のカテゴリが内側のカテゴリを内包することができるというのなの図だと……。
『body 要素内で使用される要素のほとんどが Flow カテゴリに属します』というような説明を各所でよく見かけると思うのですが、バカな私は『……ということは a 要素は Flow なのになぜ div 要素を入れられないのだろうか？』という感じで、思考の迷子になってしまった。という感じです。
ちなみにこの図は、該当カテゴリに属する HTML 要素を表示するためのボタンみたいなものですかね。なので、ちゃんと Web 上で見なければ間違った解釈で伝わってしまうので注意が必要です！！
イメージ引用元：HTML Living Standard
カーソルを乗せると、そのカテゴリに属する要素が表示されるという仕組みです。この図（モジュール）単体で知ることができるのは、各カテゴリに属する HTML 要素の種類と、カテゴリの重なりです。
でも、本当に大切なのは、
自分が使いたい HTML 要素が内包することができる HTML 要素のカテゴリはなんなんだ！ってことですね！
各 HTML 要素が内包できる子要素の
コンテンツモデルのカテゴリの調べ方
少し回りくどい見出しなので、わかりやすいように実例で説明します。
『p 要素が、内包できる子要素の調べ方！』という感じだとイメージしやすいと思います。
公式（HTML Living Standard）で、各 HTML 要素で該当の要素を紹介している部分へアクセスします。そして、「Content model:」のところに記載がある部分を参照します。
イメージ引用元：HTML Living Standard
p 要素の場合では、「Phrasing content」のカテゴリに属する HTML 要素を子要素として内包することができる、ということがわかりますね。
「Transparent 」コンテンツというカテゴリについて
例えば a 要素のコンテンツモデルを調べると「Transparent」という記載があります。これは先の項でも触れた“7つのカテゴリ”には入っていません。
イメージ引用元：HTML Living Standard
では、一体「Transparent」とは、何なんだってことですが、『親要素のコンテンツモデルがそのまま継承される』ということを示しているようです。
親要素が div 要素であれば、div 要素の「Content model:」を参照すれば良いわけですね。div 要素は、「Flow contet」を内包することができるので、それを継承して a 要素も「Flow content」を内包することができるということです。
ただし、
例の a 要素の「Transparent」には、例外が記載されています。内包する HTML 要素は、子孫に「Interactive content」カテゴリ、または「tabindex」属性を持てないという条件があるようです。代表的なのは、同じ a 要素や button 要素などです。「Interactive content」の中でも（if~）と条件があるものもが結構あるみたいなので、一度目を通してみると良いかもしれません。（interactive content）
a 要素の中に a 要素を入れたら違和感を感じると思います。
たいていの場合はそんな感じの要素が「interactive content」だと思いますので、違和感を感じたら調べてみるくらいの気持ちで問題なさそうな気がします。。
もっと簡単な
コンテンツモデルの調べ方
「HTML5 コンテンツモデル ガイド」というサイトで一発で調べることができます。
説明もセットで表示されるので、とても使い勝手が良いです。
じゃあ、なんで、長々と説明してきたのさっ！？って、公式を知ってたほうがなんか気持ちがいいじゃないですか！
まとめ
「コンテンツモデル（Content models）」とは、各 HTML 要素が内包できる子要素は決まっており、その子要素である HTML 要素を７つのカテゴリで分類して整理した概念。といった感じです。
結局のところ、大切なことは、調べ方ですね！「コンテンツモデル」という概念が存在し、それが存在しているということすら知らなければ何も調べられないものです。
HTML 要素自身のカテゴリと、その HTML 要素が内包できる子要素のカテゴリは別物ということも抑えておきましょう。
また、全部覚える必要はないと、いろいろなサイトで見受けられます。代表的な要素は経験で体に染み込みますし、私自身は、そんなに思い詰めて勉強する必要な無いのかなぁ考えます。私は。
参考・出典
・HTML Living Standard. 「3.2.5 Content models – HTML5」. https://html.spec.whatwg.org/#content-models, 2025年5月21日閲覧。
・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日閲覧。
