HTML5

on Note

フロー・コンテンツ bodyの中に配置する要素

コンテンツモデルでのカテゴリの1つ、フロー(Flow)コンテンツについて解説します。

フロー・コンテンツとはどんなカテゴリなのか、そしてどんな要素が属するのかを説明します。

また、フロー・コンテンツの要素を使ったマークアップの例をあげて、間違いのパターンを知ってもらいます。

フロー・コンテンツとはどんな要素か

フロー・コンテンツの要素は、基本的にbodyタグの中に配置します。bodyタグの中で使用するほとんどの要素がフロー・コンテンツというわけです。

bodyタグの子要素として直接配置することができるのはフロー・コンテンツだけです。つまり、フロー・コンテンツに属する要素だけが bodyタグの直接の子要素となることができる、ということです。

他のカテゴリに属する要素も、同時にフロー・コンテンツにも属する、という要素がほとんどです。結局ほとんどの要素がフロー・コンテンツに属しており、フロー・コンテンツに属さない要素を探す方が簡単なくらいです。

フロー・コンテンツに含まれないのはどんな要素か

「bodyタグの子要素として」とあるので、headタグ及び bodyタグはフロー・コンテンツに含まれません。

headタグの中に配置する要素もフロー・コンテンツに含まれません。

「子要素として直接配置」とあるので、特定の要素の中でのみ使用する要素もフロー・コンテンツに含まれません。liタグ、trタグや tdタグ、thタグなどがこれにあたります。

フロー・コンテンツのマークアップ例

フロー・コンテンツの中に配置することができるのはフレージング・コンテンツのみです。

例をあげます。

<p>
    <h1>見出し</h1>
</p>
<p>
    <div>コンテンツ</div>
</p>

pタグの中に h1タグ、またはdivタグを配置しています。

pタグはフロー・コンテンツに属します。そしてフロー・コンテンツである pタグの中に配置できるのはフレージング・コンテンツだけです。

h1タグも divタグも、フレージング・コンテンツではないので、この配置は間違いということになります。

<p>
    <img src="img.png">
</p>
<p>
    <a>リンク</a>
</p>

フレージング・コンテンツに属する imgタグや aタグは、pタグの中に配置することができます。

まとめ

bodyタグの中で使用する要素は、一定のものを除いて全てフロー・コンテンツに属します。

フロー・コンテンツの要素は、bodyタグの中に配置することになります。

フロー・コンテンツの要素の中に配置できるのは、フレージング・コンテンツの要素のみです。