HTML5の勉強を進めながら、コンテンツ・モデルまでたどり着いたは良いものの、トランスペアレントが分からぬ……と躓きました。
そういえば、親要素・子要素の継承と言われてもなんとなくで使ってしまっていたので、ここで定義をはっきりしておこうと思いました。
入れ子構造の関係性
要素同士は、コンテンツ・モデルに従って、入れ子構造になっていきます。
HTML4.01以前までのインライン要素、ブロックレベル要素の関係ですね。
コンテンツモデルに関してはこちらもどうぞ。
そもそもコンテンツ・モデルってどんな種類があるの？
そもそもブロックレベル要素とインライン要素ってなんだったんだ？ ～コンテンツ・モデルに繋がる道～
シンプルな例から。
<article>
<p>きいろは<em>安心</em>の色。</p>
</article>
HTML5では、コンテンツモデルに従って要素を組み込む必要があります。
フローコンテンツ（一般コンテンツ）の<p>の中に、フレージングコンテンツ（文章内コンテンツ）の<em>が入っています。
また、<p>はセクションコンテンツの<article>の中に入っています。
<p>を基準にしたときは？
この場合の<em>は、<p>の子になり、
<article>は、<p>の親になります。
<article>を基準にしたときは？
<article>の下に<p>が含まれるため、
<p>は、<article>の子になります。
どの要素を基準にして見るかによって、親子関係が変わります。
CSSで親子の関係にスタイルを設定できる
そしてこの親子関係に対して、CSSでスタイルを設定することが出来ます。
例えば、こんなhtmlの親子関係があったとします。
<article>
<p>きいろは<em>安心</em>の色。</p>
</article>
以下のように書くことで、<p>要素の子である<em>にスタイルを設定出来ます。
親要素の後に半角スペースを挟んで記述します。
p em{
color:#FFFF00;}
トランスペアレントって？
コンテンツ・モデルに沿った構造で記述することが基本ですが、一部例外のトランスペアレントと呼ばれるものがあります。
トランスペアレント Transparent
トランスペアレントの要素は、親要素と同じコンテンツ・モデルになります。
元の文書構造がコンテンツ・モデルとして問題が無ければ、トランスペアレントの要素のタグで囲うことができることになります。
3.2.4.3. Transparent content models
Some elements are described as transparent; they have "transparent" in the description of their content model. The content model of a transparent element is derived from the content model of its parent element: the elements required in the part of the content model that is "transparent" are the same elements as required in the part of the content model of the parent of the transparent element in which the transparent element finds itself.
W3C勧告 HTML5.1 Transparent content models より
a audio canvas del ins map object video
HTML4.01までを見慣れているともやっとするけど……
例えば、こんな構文があったとします。
<div>
<a href="sample.html">
<p>どうぶつのりカラー</p>
</a>
</div>
HTML4.01以前までのインライン・ブロックレベル要素が適用されていた時は、こういった構文はNGでした。
<a>はインライン要素、<p>はブロックレベル要素だったからです。
<div>はブロックレベル要素なので、<p>や<a>を含むことが出来ます。
ブロックレベル要素である<p>は、文書を囲うものなので、<a>に囲まれることはNGだったわけですね。
しかし、HTML5になりコンテンツ・モデルという概念へ変化し、さらに<a>はトランスペアレントでもあるため、この構文はOKになります。
この構文では、<a>がトランスペアレントであるため、<a>の親であるdivのコンテンツ・モデルはフローコンテンツになります。
では、こうなった場合は？
<p>
<a href="sample.html">
<h1>どうぶつのりカラー</h1>
</a>
</p>
こちらはNGになります。
<p>要素のコンテンツ・モデルにおけるカテゴリはフローコンテンツですが、コンテンツ・モデルはフレージングコンテンツ（文章内コンテンツ）です。
そのため、<h1>はヘッディングコンテンツ（見出しコンテンツ）のため、フレージングコンテンツ内に入れることが出来ません。
トランスペアレントの<a>が親要素<p>のコンテンツ・モデルにおけるカテゴリを継承し、<a>もフレージングコンテンツとして扱われるからです。
では、こちらの構文ではどうなるのでしょうか。
<article>
<a href="sample.html">
<h1>どうぶつのりカラー</h1>
</a>
</article>
こちらはOKです。
<article>がセクションコンテンツなので、ヘッディングコンテンツである<h1>を入れることが出来ます。
トランスペアレントの<a>が親要素<article>のコンテンツ・モデルにおけるカテゴリを継承し、<a>もセクションコンテンツとして扱われるからです。
所感とか
<div>も<p>も同じフローコンテンツなのに、なぜpの中にdivを入れられないのか？と考えた時に、どうやらコンテンツ・モデルという単語とコンテンツ・モデルにおけるカテゴリと言うと、また別の意味合いになってくるということが判明しました。
二つともコンテンツ・モデルはフローコンテンツだけど、<div>のカテゴリはフローコンテンツで、<p>のカテゴリはフレージングコンテンツなので、<div>を<p>で囲えないことになる、でいいのかな。
単語だらけになってしまうのでもっとスマートにまとめたい。
参考記事
http://webcre8.jp/investigate/html5-content-model.html
http://a-flat.biz/archives/4011
W3C勧告 HTML5.1 Transparent content models