HTML5の「コンテンツ・モデル」とは
はじめまして、株式会社インプレッシブでデザイナーをやっている sumii です。
もう年の瀬ですね。お餅を食べる季節です。
ちなみに僕は毎朝出勤前にお餅を２つ食べています。
休日は４つ。
さて今回はHTML5の「コンテンツ・モデル」について紹介します。
コンテンツ・モデルって何？
HTML5以前のHTML4では、それぞれの要素が「ブロックレベル」「インラインレベル」というカテゴリーに分類されていましたが、HTML5からはこの２つの分類はなくなりました。
代わりにできたのが「コンテンツ・モデル」という新しい分類です。
「コンテンツ・モデル」には下記の種類があります。
メタデータ・コンテンツ
フロー・コンテンツ
フレージング・コンテンツ
セクショニング・コンテンツ
ヘッディング・コンテンツ
エンベッディッド・コンテンツ
インタラクティブ・コンテンツ
HTML5のすべての要素は上記のいずれか、あるいは複数のコンテンツ・モデルに属しています。
メタデータ・コンテンツ
メタデータ・コンテンツは主に<head>の中に記述される、外部ファイルの読み込みやtitle、metaなどが該当します。
base command link meta noscript script style title
フロー・コンテンツ
HTMLドキュメントに使われるほとんどの要素は、このフロー・コンテンツに属しています。
a abbr address area article aside audio b bdi bdo blockquote br button canvas cite code command datalist del details dfn div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hgroup hr i iframe img input ins kbd keygen label map mark math menu meter nav noscript object ol output p pre progress q ruby s samp script section select small span strong stylesub sup svg table textarea time ul var video wbr Text
フレージング・コンテンツ
感覚的には「インラインレベル」に近く、主にp要素などでマークアップされたテキストの意味付けをするようなイメージです。
フレージング・コンテンツの子要素にはフレージング・コンテンツに分類される要素しか持つことができません。(例外あり)
a abbr area audio b bdi bdo blockquote br button canvas cite code command datalist del dfn em embed i iframe img input ins kbd keygen label map mark math menu meter noscript object output progress q ruby s samp script select small span strong sub sup svg textarea time var video wbr Text
セクショニング・コンテンツ
見出しと概要を含んだ階層構造の範囲を定義する要素が分類されます。
article aside nav section
ヘッディング・コンテンツ
hx要素が分類されます。
h1 h2 h3 h4 h5 h6
エンベッディッド・コンテンツ
外部リソースや別言語を組み込むコンテンツ。
audio canvas embed iframe img math object svg video
インタラクティブ・コンテンツ
ユーザーが操作することのできるコンテンツを指します。
a audio button details embed iframe img input keygen label object select textarea video
まとめ
コンテンツ・モデルとそれに分類される要素を軽く紹介しましたが、マークアップによってコンテンツ・モデルが変化する要素も存在しています。
その詳しい紹介は次回に回したいと思います。
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか？