そもそもコンテンツ・モデルってどんな種類があるの?

  • 13
    Like
  • 0
    Comment

2017/5/23 画像を更新しました。ご指摘ありがとうございます!

はじめに コンテンツ・モデル図解

この前の記事で、コンテンツ・モデルの図をつくりました。
そもそもブロックレベル要素とインライン要素ってなんだったんだ? ~コンテンツ・モデルに繋がる道~
今回はこの7分類を記載していこうと思います。
コンテンツモデル102.png

コンテンツ・モデル Kind of content

W3C HTML5.1 勧告 3.2.4 Content models

  1. 文書情報コンテンツ Metadata content
  2. 一般コンテンツ Flow content
  3. セクションコンテンツ Sectioning content
  4. 見出しコンテンツ Heading content
  5. 文章内コンテンツ Phrasing content
  6. 組み込みコンテンツ Embedded content
  7. 対話型コンテンツ Interactive content

1. 文書情報コンテンツ Metadata content

文書情報コンテンツとは、文書のメタデータ(情報)やスタイルに関係する要素が属します。スタイルシートをリンクするのにも使われますね。
メタデータコンテンツとも呼ばれます。
また、基本的にブラウザ上には描画されません。

Metadata content is content that sets up the presentation or behavior of the rest of the content, or that sets up the relationship of the document with other documents, or that conveys other "out of band" information.

base link meta noscript script style template title

2. 一般コンテンツ Flow content

文書に使われるほとんどの要素が一般コンテンツに属します。
フローコンテンツとも呼ばれます。
特定の要素内の特定の位置にしか配置できないものは該当しません。
(例:body,html,headなど)

Most elements that are used in the body of documents and applications are categorized as flow content.

a abbr address area (map要素の子孫の場合) article aside audio b bdi bdo blockquote br button canvas cite code data datalist del details dfn div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hr i iframe img input ins kbd keygen label main map mark math menu meter nav noscript object ol output p picture pre progress q ruby s samp script section select small span strong sub sup svg table template textarea time u ul var video wbr *text*

3. セクションコンテンツ Sectioning content

セクションコンテンツは、文章のまとまり、セクションの範囲を定義する要素が属します。
セクショニングコンテンツとも呼ばれます。

Sectioning content is content that defines the scope of headings and <footers>.

article aside nav section

4. 見出しコンテンツ Heading content

見出しコンテンツは、セクションの見出しを表す要素が属します。
ヘッディングコンテンツとも呼ばれます。
文書の階層構造とアウトラインに影響します。

Heading content defines the header of a section (whether explicitly marked up using sectioning content elements, or implied by the heading content itself).

h1 h2 h3 h4 h5 h6 (hgroup* 勧告候補から削除)

HTML5勧告候補で追加されていたhgroupは削除になりました。
h要素の複数見出しをグループ化し、主要な見出しをアウトラインに与えるものでした。
例えば、h1に対する副題としてh2を使っていた2つをまとめて1つの見出しとして割り当てるものでした。

hgroup
<hgroup>
  <h1>タイトル</h1>
    <h2>副題 ~キャッチフレーズ~</h2>
</hgroup>

しかし実際はこうでいいんじゃない?ということで削除に。

h1+p
<header>
  <h1>タイトル</h1>
    <p>副題 ~キャッチフレーズ~</p>
</header>

(そもそも自分はhgroupの存在すら知りませんでした……知らずに生まれ知らずに消えていた……)

5. 文章内コンテンツ Phrasing content

文章内コンテンツは、今までのインライン要素にほぼ該当します。
フレージングコンテンツとも呼ばれます。

Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of phrasing content form paragraphs.

 a abbr area (map要素の子孫の場合) audio b bdi bdo br button canvas cite code data datalist del dfn em embed i iframe img input ins kbd keygen label map mark math meter noscript object output picture progress q ruby s samp script select small span strong sub sup svg template textarea time u var video wbr text

6. 組み込みコンテンツ Embedded content

組み込みコンテンツは、文書内に組み込む画像や動画・音声、svgなどを挿入する要素が属します。文書以外の素材を載せるときに使います。
エンベッディッドコンテンツとも呼ばれます。
うーん、読みにくいな……

Embedded content is content that imports another resource into the document, or content from another vocabulary that is inserted into the document.

audio canvas embed iframe img math object picture svg video

7. 対話型コンテンツ Interactive content

対話型コンテンツは、a要素やbutton要素など、ユーザーが操作できる要素が属します。
インタラクティブコンテンツとも呼ばれます。
出力されたものと対話(操作)出来るからインタラクティブなんですね。

Interactive content is content that is specifically intended for user interaction.

a audio button details embed iframe img input keygen label select textarea video