HTML5でブロック要素・インライン要素による分類が廃止された件

2016年9月15日カテゴリー : CSS コメント : 0

　HTML4.01 では要素はブロック要素とインライン要素のいずれかに分類されていましたが、 HTML5 ではコンテンツモデルによって要素を分類するように変更されました。今まではインライン要素のなかにブロック要素を置いてはいけないというルールがあり、HTML 経験の長い人であれば感覚的に何をどこに入れてはいけないかわかっていると思いますが、これがカテゴリー・コンテキスト・コンテンツモデルによってより明確に定義されることになりました。

　例えば、<span>～</span> の間に div タグを入れてはいけないといったように、タグの意味と文書構造から考えておかしかったものを、コンテンツモデルの概念によって説明することができるようになります。WordPress をカスタマイズする程度の HTML 初級者であればそれほど神経質になる必要もありませんが、デザインレイアウトのために複雑な HTML を書かなければならないときには、要素間の関係について確認をしたほうがよいと思います。

コンテキスト

　W3C が勧告した仕様書の日本語訳を一生懸命読んでみたりしたのですが、この用語に対する納得できる説明を見つけることができませんでした。コンテキストはアルファベットで書くと context となり、一般的には「文脈」と訳されることが多いです。そこから転じて、「背景」、「状況」、「(文章の)前後関係」などとも訳されます。

コンテンツモデル

　どの要素(タグ)にどんなコンテンツを入れてよいかを定義したものです。

文書構造の決まり方

　さて、駆け足でとてつもなく雑な説明をかましてしまいましたが、実際にどうやって文書構造を決めるのかを理解しておけば、用語の意味がわからなくてもなんとかやっていけます。許してちょ。

　まずは各要素のカテゴリー・コンテキスト・コンテンツモデルを調べなければなりません。おすすすめなのは HTML5.JP さんのところです。試しに div タグについて調べてみました。

リンクはこちら。

HTML 要素 – HTML5タグリファレンス – HTML5.JP

　例として、div タグと span タグの関係について考えてみます。それぞれのカテゴリー・コンテキスト・コンテンツモデルを整理するとこのようになります。

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

このような文書構造が許されるのかどうかです。

<div>
    <span>
        テスト
    </span>
</div>

<div>

<span>

テスト

</span>

</div>

　まず、子要素のカテゴリーが親要素のコンテンツモデルと一致しているかを見ます。div のコンテンツモデルはフロー・コンテンツ、span のカテゴリーはフロー・コンテンツとフレージング・コンテンツなので、この点はクリアしています。

　ここで span のコンテキストを見ると、「フレージング・コンテンツが期待される場所」とあります。これは親要素のコンテンツモデルがフレージング・コンテンツでなければならないことを意味しており、今回の div では条件を満たすことができません。

　解決するには p タグあたりを追加してあげればよいです。

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

どことなく見慣れた HTML になるかと思います。

<div>
    <p><span>テスト</span></p>
</div>

<div>

</div>

まとめ

　HTML 4.01 から実に15年振りのバージョンアップとなりましたが、要素の親子関係以外にも新しいタグが追加されたり、プラグインを使わなくてもビデオやオーディオをブラウザで再生できるようになるなど、Web デザイン業界では大きな話題となりました。

　インライン要素のなかにブロック要素を置いてはいけないというシンプルなルールが HTML5 からは複雑になりましたが、親要素のコンテンツモデルと子要素のコンテキストを一致させることが基本的なルールとなります。このほかにトランスペアレントや孫要素に制限がかかるなどの新しい機能も追加されていますので、これを機に HTML5 について調べてみるとよいのではないでしょうか。