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

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

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

カテゴリー

 いままでは各要素をブロック要素とインライン要素に分類してきましたが、HTML5 では目的に応じたカテゴリーによって分類します。要素によっては複数のカテゴリーに分類されたり、特定の条件によってカテゴリーが変化する要素などもあります。

  • メタデータ・コンテンツ
  • フロー・コンテンツ
  • セクショニング・コンテンツ
  • ヘッディング・コンテンツ
  • フレージング・コンテンツ
  • エンベッディッド・コンテンツ
  • インタラクティブ・コンテンツ
  • セクショニング・ルート

こちらのページでは、カテゴリーの要素の一覧が確認できます。

こちらのページでは、各カテゴリーについてわかりやすく説明されているので、興味がある人は参考にしてください。

コンテキスト

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

コンテンツモデル

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

文書構造の決まり方

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

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

20160915_2_1

リンクはこちら。

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

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

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

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

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

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

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

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

まとめ

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

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

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP