WEBCRE8.jpウェブクリ8.jp

webデザイナーによる、デザインとwebを楽しむ情報ブログ

調べる。

備忘録としてwebやデザインについて調べたり
新しく知ったことなどを書き残していくカテゴリです。

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

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

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

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

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

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

HTML5入門シリーズ

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

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

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

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

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

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

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

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

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

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

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

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

コンテンツ・モデルとは

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

本仕様で定義されている要素は、それぞれに、その要素に期待されるコンテンツの種類を表すコンテンツ・モデルを持ちます。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)

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

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

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

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

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

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

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

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

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

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

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

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

フロー・コンテンツ=ブロック要素?

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

フレージング・コンテンツ=インライン要素?

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

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

コンテンツ・モデル=コンテンツのカテゴリ?

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

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

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

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

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

以下に例を挙げます。

em要素の場合

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

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

p要素の場合

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

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

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

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

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

まとめ

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

  • Pingback: [HTML5]アウトラインで迷わない! sectionと見出しについて - WEBCRE8.jp()

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

    少し違うのではと思います。
    原文(WHATWG版)では”a description of the element’s expected contents”で
    期待されるコンテンツ(内容)の「記述」となっています。
    カテゴリに限定した話にはなっていません。

    実際に、単にカテゴリの名前のコンテンツモデルありますが、
    そうでないものあります。
    散文(prose)で記述される場合もありえますし、
    トランスペアレントの場合もあります。
    (もっと柔軟で、それゆえに面倒くさい・・・!)
    些細な事かと思われるかもしれませんが、
    重要な区別だと思います

    それに関連して
    >トランスペアレント・コンテンツ・モデル
    コンテンツのカテゴリの一種として紹介されていますが、
    トランスペアレントはコンテンツ(内容)モデルではありますが、
    カテゴリの一種ではありません。
    トランスペアレントというカテゴリに含まれる要素もありません

    また必ずしも「中身の要素のコンテンツ・モデルに影響を与えない」というわけでもありません。

    仕様書にもある例をあげると
    aは正しいHTMLですが
    aは正しくないHTMLです

    がコンテンツモデルに影響を与えています。

    (ちなみに現仕様ではrubyのコンテンツモデルは散文で記述されており
    面倒くさい感じなので自分も理解しておりません。)

    • コメント有難う御座います!
      すごく参考になったので個別にレスさせて頂きますね。

      >カテゴリに限定した話にはなっていません
      確かにご指摘の通りです。
      今回の記事ではカテゴリの説明に留めており、カテゴリに分類されていないテーブルモデル等(trとか)に属するタグにも触れていません。この書き方だと全てのタグが何かしらのカテゴリに含まれているとも勘違いさせてしまいますね。

      下のトランスペアレントコンテンツに関しては補足としてつけたんですが、これもなんか変ですね。ご指摘の通りです!

      中身のコンテンツモデルに影響を与えない、と言うのは確かに私のざっくりとした解釈で、例外的な場合の考慮が足りなかったですね。rubyは僕も残念ながら大してわかってませんが、ちょっと飲みこめた範囲で追記させて頂きます★

  • >パルパブル・コンテンツ

    HTML4にもあった、パラグラフは空であってはいけない、というルールが拡張されたものです。

    (正確にはブラウザは空のP要素を無視すべき、と書かれている)
    HTML4.1原文:We discourage authors from using empty P elements. User agents should ignore empty P elements.

    参考:http://krijnhoetmer.nl/irc-logs/whatwg/20111006
    the requirement itself is essentially just an evolution of HTML4’s “paragraphs musn’t be empty” rule

    以前は、普通のテキストノードかエンベッディッド(埋め込み)コンテンツを
    子孫に一つでも含んでいればだいたいOKって扱いだったと思うのですが、
    「//CSS//のようなタグは中身としてテキストノードを持っているけど、
    子孫にスタイルタグを持ってれば、それで正しいことにならない?」的ツッコミが入ったため、
    パルパブル・コンテンツというコンセプトをこしらえ明白にしたものだと理解しています。
    参考; https://www.w3.org/Bugs/Public/show_bug.cgi?id=14013

    禁止事項は拡大されましたが、将来の要求を見越した変更になっているそうです

    • こちらも参考になる情報有難う御座います!

      なるほど。しかしわざわざ今更新しい分類を作るほどのルールなのかな?とも思ってしまいますよねwでもまあ、ルールって例外を積極的に作ると覚えられませんからね。この辺もうちょっとツッコんで調べてみることにします!

  • このコメント欄はHTMLタグを記述すると勝手に閉じられるのですね。
    例が意味不明になっています。すいません。

    validator( http://html5.validator.nu/ )かけた結果を画像で貼っておきます
    http://gyazo.com/cc986fd758ebc51e33f01c9a1883ebea
    http://gyazo.com/f32e0170bc00c4f569b05475bb1ca251

  • 別にどこに何をおいてもいいと思ふ

    • コメントありがとうございます★

      そうですね、そうとも言えます。そう言い切ってしまえるなら別にそれでいいのです。個人的にはこれは「テーブルについて食事をするときナプキンをつける?食器で音を立てたらダメなの?」みたいな話なんですよね。迷ってしまう人に向けてのつもりです。

      マークアップは、簡単だと思う人にとっては簡単だし、難しいと思う人にとっては難しいモンなんだなーと思います。

  • Pingback: [HTML5 入門]実用を意識した最小単位からの文書構造チュートリアル - WEBCRE8.jp()

  • Pingback: 知らないといつまでたってもHTMLとCSSが理解できない暗黙の仕様4つ - WEBCRE8.jp()

  • Pingback: [HTML5 入門]HTML5におけるブロック要素とインライン要素の考え方 - WEBCRE8.jp()

  • Pingback: HTML/CSSくらい自分も書けると思ってる勘違いプログラマにありがちな行動【HTML編】 | Web・アプリ制作メモ - m31()