WEBCRE8.jp > 調べる > [HTML5 入門]コンテンツ・モデルについて勘違いしそうなところ

[HTML5 入門]コンテンツ・モデルについて勘違いしそうなところ

この記事は約15分ぐらいで読めます

HTML5、難しいですよね。…いやいやそんなことはないですよ！たくさんの要素がありますが、ちょっとづつ理解して行きましょうよ★今回はコンテンツの分類についてです。

こんにちは。結構HTML5のことが好きなのにも関わらずHTML5カンファレンスには行けなかったwebcre8です。悲しいけど前を向いていきます！ｗイベントについては以下の記事でまとめられています。

HTML5カンファレンス2012の資料まとめ | Stocker.jp / diary

いやー楽しいですよねHTML5。勉強していると、セマンティックなwebというものに自分がドンドン近づいているのを感じます。気のせいかも知れませんけど。まあそれを実際にブログで実行できているかどうかは…一応(未だに)ベータ進行中なので、一旦置いておいてくださいねｗ

HTML5入門シリーズ

折りしも東京では先日HTML5カンファレンスというイベントが開催され、webで飛び交う話題もそれについてのものがドンドン増えてきています。このブログでもたびたびHTML5のコーディングにおけるややこしい話題を取り扱っていますが、こういった需要はさらに増えていくのではないかなと思っています。

今回からたびたびHTML5入門と題しまして、HTML5を使ってweb制作をしていく上で避けては通れない基礎的な理解を深める為の文章を書いていきます。webcre8もHTML5は絶賛勉強中で、これはいち制作者としてHTML5によるコーディングをどうするべきかを考えた考察の覚書でもあります。間違いがあればガンガンツッコミをお願いします！知識のある人は単に「間違っている」という指摘だけでなく正しい説明をくれるので最近すごく助かってます。皆で一緒に正しい認識を得られるといいですね！

「html5 section」で困っている人へ

WEBCRE8.jpには[HTML5]アウトラインで迷わない！ sectionと見出しについてという記事があり、毎日検索ワード「html5 section」でのアクセスがそこそこあります。この話題の理解にはHTML文書における「アウトライン」と言う概念に対する理解が必要であり、それはその記事内でがっつり述べたつもりです。

そしてもしこれでアウトラインや見出しの関係性について理解ができない場合、この「コンテンツ・モデル」というものに対する理解がまた前提として必要なのではないかなと感じました。

というわけでこの記事ではその辺をなるべくかみ砕いて書いてみます。

webcre8も英語は読めないですし、完璧な理解と裏付けが理解出来ているわけではないですが、最近実際論理的に考えて「正しいマークアップとはこうであるべきではないか」と考えてみたことがHTML5の定義とガッチリハマってたりして、もうこれは「あー、策定する人達も論理的に考えた結果仕様を決めてるわけだし、リファレンス読まなくても論理的にさえ考えればあるべき仕様に辿りつけるんじゃね？」とさえ感じることがあったりしますｗもちろん憶測ばかり書く訳にはいかないですが…同時にブログは私見を述べて意見を頂く場にしたいとも考えております。さーせん＞＜

コンテンツ・モデルの説明に入る前に

各コンテンツのカテゴリを解説します。ただ、webcre8の大好きなHTML5.JPの記述をここで繰り返しても仕方ないので、辞書的な意味はあちらに任せてなるべく分かりやすく説明する努力をしてみます。こちらにしても勉強中でもありますので、間違いがあったらご指摘ください！★

引用の記述、ソースも殆どHTML5.JPですので！引用以外の記述は当然webcre8の解釈です。

コンテンツ・モデル – HTML5タグリファレンス – HTML5.JP

一応付け加えておくと、HTML5.JPは2012年9月現在タグのリファレンスのページ等のソースとして2011年5月25日のワーキングドラフトを基にしており、現時点での最新の2012年3月29日のワーキングドラフトで改訂された内容を反映していません。以前の記事で述べたように、万全を期するためには最新のワーキングドラフトを反映した資料も確認する事をお勧めします。というか私が既にそれで間違っていますｗ

コンテンツ・モデルとは

コンテンツ・モデルとは、「その要素内にどんなカテゴリに属しているコンテンツを入れることが出来るかの定義」の事です。

本仕様で定義されている要素は、それぞれに、その要素に期待されるコンテンツの種類を表すコンテンツ・モデルを持ちます。HTML 要素には、その要素のコンテンツ・モデルで記述される要件に一致するコンテンツを入れなければいけません。

コンテンツのカテゴリ

では一応各コンテンツのカテゴリの説明をします。軽くですけどね。これを踏まえて勘違いを正していきましょう★

メタデータ・コンテンツ
(Metadata content)

メタデータ・コンテンツに分類されるコンテンツは、形のない「概念」のような存在です。

メタデータ・コンテンツに属する要素

base
command
link
meta
noscript
script
style
title

概念と言う事で、基本的にそれをコードに書いたからと言って何か画面に表示されることはありません。「帯域外」と説明されていますが、metaやlink等、他のコードの定義に関係するようなものばかりですね。

殆どhead内に書くものばかりですし、他のコンテンツとは一線を画しています。

フロー・コンテンツ
(Flow content)

フロー・コンテンツに分類されるコンテンツは、段落やテキスト等の内容を含むコンテンツ全てのことです。

フロー・コンテンツに属する要素

a
abbr
address
area(map要素の子孫の場合)
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
style(scoped属性が存在している場合)
sub
sup
svg
table
textarea
time
u
ul
var
video
wbr
テキスト

実に82個と殆どの要素がここに属しています。この中でも特に

address
blockquote
del(例外あり)
div
dl
fieldset
figure
footer
form
header
hr
ins(例外あり)
map(例外あり)
menu(例外あり)
ol
p
pre
style(scoped属性が存在している場合)
table
ul

これらのタグはフレージング・コンテンツではない生粋のフローコンテンツと言えるでしょう。端的に言えば、これらはp要素には入れられないタグです。

セクショニング・コンテンツ
(Sectioning content)

セクショニング・コンテンツに分類されるコンテンツは、文書におけるアウトラインを作る為の要素の分類です。

セクショニング・コンテンツに属する要素

article
aside
nav
section

HTML5では文書の階層構造はセクショニング・コンテンツが作ります。レイアウトはdiv等で行い、内容を他の各要素でマークアップし、全体の構成が完成します。

ヘッディング・コンテンツ
(Heading content)

ヘッディング・コンテンツに分類されるコンテンツは、上記二つに同じく箱のようなエリアを持ち、親要素となるセクションにとっての見出しになります。

ヘッディング・コンテンツに属する要素

h1
h2
h3
h4
h5
h6
hgroup

フレージング・コンテンツ
(Phrasing content)

フレージング・コンテンツに分類されるコンテンツは殆どがテキストコンテンツであり、そうでなくとも文章の流れでテキストと同列に扱われるコンテンツです。

フレージング・コンテンツに属する要素

a(フレージング・コンテンツのみが入れられている場合)
abbr
area(map要素の子孫の場合)
audio
b
bdi
bdo
br
button
canvas
cite
code
command
datalist
del (フレージング・コンテンツのみが入れられている場合)
dfn
em
embed
i
iframe
img
input
ins (フレージング・コンテンツのみが入れられている場合)
kbd
keygen
label
map (フレージング・コンテンツのみが入れられている場合)
mark
math
meter
noscript
object
output
progress
q
ruby
s
samp
script
select
small
span
strong
sub
sup
svg
textarea
time
u
var
video
wbr
テキスト

エンベッディッド・コンテンツ
(Embedded content)

エンベッディッド・コンテンツに分類されるコンテンツは、フレージング・コンテンツと同じく中身のコンテンツそのものの形をしていますが、中でも通常のテキスト以外の他の形式のコンテンツを指しています。

エンベッディッド・コンテンツに属する要素

audio
canvas
embed
iframe
img
math
object
svg
video

分かりやすいところで言うならimg、embed等に入っているフラッシュはコンテンツ自体が高さや幅を持っていますよね。

インタラクティブ・コンテンツ
(Interactive content)

インタラクティブ・コンテンツに分類されるコンテンツは、ユーザのクリックなどのアクションで操作が可能なものです。

インタラクティブ・コンテンツに属する要素

a
audio (controls 属性が存在している場合)
button
details
embed
iframe
img (usemap 属性が存在している場合)
input (type 属性が Hidden 状態でない場合)
keygen
label
menu (type 属性が toolbar 状態の場合)
object (usemap 属性が存在している場合)
select
textarea
video (controls 属性が存在している場合)

トランスペアレント・コンテンツ・モデル
(transparent content model)

トランスペアレントとは言葉の意味としては「透明」のことですね。これを置いたところで中身の要素のコンテンツ・モデルに影響を与えないと言う事であり、どこに置いたとしてもこれ自体が何かに影響を与えることはありません。

トランスペアレント・コンテンツ・モデルに属する要素

トランスペアレントはほぼどんなコンテンツでも含むことが出来ます。

パルパブル・コンテンツ
(Palpable content)

2012年3月29日のワーキングドラフトから新しく加わったコンテンツのカテゴリで、追加された理由があまりよくわかりませんｗ 明確な内容のある要素、という意味だそうで、これに分類されたコンテンツには何かしら内容のある要素を含まなければならないという条件があります。普通に作っていれば当然満たす条件ですね。そこまで気にする必要はないと思ってます。

3 Semantics, structure, and APIs of HTML documents — HTML5

詳しい内容は上記にありますが、日本語の文献は以下になります。

HTML 5 に於ける”明瞭な内容” – HTML 5 リファレンス

各要素にかかわる共通事項：HTML5各要素別メモ

追加された事情とか知っている人は教えてくださいーｗ

ブロック要素とインライン要素

ブロック要素とインライン要素ってどうなったの？という疑問がある人もいると思います。

フロー・コンテンツ＝ブロック要素？

HTML5からはブロック要素、インライン要素と言う言い方がなくなり、フロー・コンテンツ、フレージング・コンテンツという言葉が出てきました。これらは単純にイコールではなく、フロー・コンテンツとはほぼ全てのbody内に設置できる要素全てを指します。以前のブロック要素の認識に近いのはフレージング・コンテンツではないフロー・コンテンツです。

フレージング・コンテンツ＝インライン要素？

次にインライン要素ですが、フレージング・コンテンツはほぼインライン要素と同じ扱いであると考えています。これらは基本的にテキストレベルのコンテンツであり、インライン要素と同様にheightを持たず、marginやwidthを指定できないといった特性もそのままです。

これらは当然、以前のようにCSSのdisplayプロパティで扱いを変更できます。

コンテンツ・モデル＝コンテンツのカテゴリ？

webcre8自身、最初は参考にした文章が「コンテンツ・モデル」というタイトルの文書であることから、「コンテンツ・モデル」と言う言葉はこの「フロー・コンテンツ、フレージング・コンテンツといったカテゴリに分けられる分類の総称」だと思ってしまっていました。

その為「ん？pのコンテンツ・モデルがフレージング？」と勘違いして混乱していたわけです。これらフロー・コンテンツ、フレージング・コンテンツと言った分類名自体を総称する場合は「コンテンツ・モデルのカテゴリ(原文では Kinds of content と表現されています)」は○○、と言えばいいんだと思います。

まあぶっちゃけ早とちりに過ぎないんですが…ｗ他にも混乱した人はいるんじゃないかと思います。

これについてもやもやしていたところ、@mtrootyyさんのツイートでやっぱそうなのかーと合点が行きました。ありがとうございます！★

で、結局何をどこに置いたらいいの？

以下に例を挙げます。

em要素の場合

em要素の「カテゴリ」はフロー・コンテンツでありフレージング・コンテンツです。その下に「この要素を使うことができるコンテキスト」が「フレージング・コンテンツが期待される場所」とありますよね。つまり実際にem要素を置くことが出来る場所はpの中等のフレージング・コンテンツが置ける場所なんです。

そしてその下の「コンテンツ・モデル」にはフレージング・コンテンツとありますね。これはem要素の中にはフレージング・コンテンツに分類されるものしか入れられない、と言う事になります。emの中にdivは置けません。

p要素の場合

p要素のカテゴリはフロー・コンテンツです。この要素を使うことができるコンテキストはフロー・コンテンツが期待される場所と言う事で間違いようはありません。ですが、コンテンツ・モデルはフレージング・コンテンツとありますね。

これは、p要素自体はフロー・コンテンツにカテゴライズされていますが、中に入れられるものはフレージング・コンテンツのみだという事です。つまりpの中にもdivは入りません。

各要素について説明する場合

em要素のコンテンツ・モデルにおけるカテゴリはフロー・コンテンツとフレージング・コンテンツであり、コンテンツ・モデルはフレージングコンテンツだ
p要素のコンテンツ・モデルにおけるカテゴリはフロー・コンテンツであり、コンテンツモデルはフレージング・コンテンツだ

と言えば間違いないかと思います。

まとめ

この記事は実は前に書きかけていて、最近書いていた記事を読む為の前提条件としてどうしても必要となってくるものなので急いで書き上げました。つまり、この記事は前フリですｗ(追記：続きを書きました→ [HTML5 入門]実用を意識した最小単位からの文書構造チュートリアル ) 当然リファレンス等の説明を読んで理解できている人には不要な文ですが、webcre8は混乱したことがあるので、必要な人には必要なんじゃないかなーと思います。文章ばかりでつまんない記事ですが、今後に期待してもらえると有難いですｗ