みなさまこんにちは、クリエイターブログ初登場のあつこです(ΦωΦ)
自社サービスのフロントエンド周りのエンジニアとして、せっせとコーディングをしております。
主にHTML/CSS/たまにJSの話ができたらいいなぁ、と思っています。

弊社では開発本部全体で社内外へ勉強会を行っていたりするのですが、
（私もAWDDでお話しました！）
先日社内向けに「コンテンツ・モデル」についてお話する機会がありました。
その際に調べたこと・話したこと等を、簡単にまとめてみました。

実際に勉強会に使った資料がコチラ。

コンテンツ・モデルってなに？

HTMLで使用する要素は主にブロックレベル要素とインライン要素に分類されます。
資料内にもあったのですが、インライン要素の中にブロックレベル要素を入れると気持ち悪いってルールを漠然と持っている方もいるかと思います。
（私がそうでした・・・）

そもそも何でそんなルールなのかというのは、ぞれぞれの要素の特性によるものなのですがざっくり言うと

• ブロックレベル要素：文章の構造そのものを表すかたまり
• インライン要素：文章の一部に意味付けをする

という感じになります。（ホントにざっくりですが）

なので、インライン要素の中にブロックレベル要素が入っていると文章の一部の中に文章構造のかたまりがあるという事になるんですね。
そりゃ気持ち悪いわ('A`)

そんなインライン要素とブロックレベル要素なのですが、HTML5では廃止されてしまいました。
そして新しく登場したのがコンテンツ・モデルです。
これは要素Aの中には要素Bを入れることができるという配置ルールです。（これまたざっくりですが）

HTML5の要素はいずれかのカテゴリーに分類される

例外もありますが、似たような特性を持つ要素同士をラベリングしたカテゴリーに分かれます。
複数のカテゴリーに属しているものもあったりします。（資料に図を載せてあります）
主要なものとしては以下の7つ。

メタデータ・コンテンツ Metadata content	主にhead内に置かれる、HTML自体の情報を表したりするもの meta, title...
フロー・コンテンツ Flow content	大体のコンテンツがこれに属してるやつ
セクショニング・コンテンツ Sectioning content	見出しと概要を付けられるもの article, nav...
ヘッディング・コンテンツ Heading content	セクションの見出しになるもの h1, h2...
フレージング・コンテンツ Phrasing content	段落などに含まれる文節・語句など small, label...
エンベッデッド・コンテンツ Embedded content	ドキュメントに他のリソースを組み込むもの canvas, iframe...
インタラクティブ・コンテンツ Interactive content	ユーザーの操作に特化したもの button, textarea...

また、要素はコンテンツ・モデルの他に「カテゴリー」と「この要素を使うことが出来るコンテキスト」等の情報を持っています。
それぞれ、こんな感じ。

カテゴリー	コンテキスト	コンテンツ・モデル
要素自身のカテゴリー	要素自身がどこに入れるか	子要素にしていい要素のカテゴリー

実際のコードでコンテンツ・モデルを見てみる

何だかわかりにくいと思うので、例をあげます。

資料でも出てきた気持ち悪いコードですね。
ブロックレベル・インラインの考え方での気持ち悪さの解説は資料に譲るとして、コンテンツ・モデルでの解説をしたいと思います。
上で出てきた情報をそれぞれまとめると、

	カテゴリー	コンテキスト	コンテンツ・モデル
span	フロー・コンテンツ フレージング・コンテンツ	フレージング・コンテンツが期待される場所	フレージング・コンテンツ
div	フロー・コンテンツ	フロー・コンテンツが期待される場所	フロー・コンテンツ
p	フロー・コンテンツ	フロー・コンテンツが期待される場所	フレージング・コンテンツ

こうなります。（資料に出てきたパルパブル・コンテンツは省きました）
ここで改めてコードをみると、、、

• spanにはフレージング・コンテンツを入れたいが、divはフレージング・コンテンツではない

ということになるので、大変気持ち悪いですね。
なので、入れ替えてみましょう。

spanとdivを入れ替えてみました。
これでどうでしょう？

• divにはフロー・コンテンツを入れたいし、spanはフロー・コンテンツである
• spanはフレージング・コンテンツが期待される場所に入りたいが、divはフレージング・コンテンツを入れてほしくない

最初の項目はクリアしてますが、コンテキストの問題があるようです。
さらに、spanとpの関係を見てみると、、、

• spanにはフレージング・コンテンツを入れたいが、pはフレージング・コンテンツではない

こっちの関係もダメみたいです。もう泥沼です。
では、更に入れ替えてみます。

更にspanとpを入れ替えてみました。

• divにはフロー・コンテンツを入れたいし、pはフロー・コンテンツである
• pにはフレージング・コンテンツを入れたいし、spanはフレージング・コンテンツである
• spanはフレージング・コンテンツが期待される場所に入りたいし、pはフレージング・コンテンツを入れてほしい

完璧ですね
お互い調和のとれたステキな関係を築いていると思います。

インライン要素とブロックレベル要素とコンテンツ・モデル

インライン要素とブロックレベル要素が廃止されたといっても、上の例をみると分かる通り基本的な考え方は踏襲しています。
要は文章構造を考えた時に気持ち悪くないかってことですね。
なので、「コンテンツ・モデルなんて覚えらんね、、もう表示できればなんでもよくない？」と思っちゃった方は
そんな気持ちをグッとこらえて、HTMLが文章であるという基本に立ち返ってみてください。
本文が全部h1の中に入ってたら気持ち悪いし、SEO的にも大爆発です。
そうならないように、日頃から構造を意識したマークアップが出来るといいですね。

それでは今回はこのへんで！