このページの本文へ

3分でわかるHTML5のコンテンツモデルとカテゴリー (3/3)

2011年12月06日 13時00分更新

文●浜 俊太朗/ライブドア

  • この記事をはてなブックマークに追加
本文印刷

カテゴリーの種類

 要素の分類に用いられる「カテゴリー」の種類には、以下のようなものがあります。

  • メタデータコンテンツ
  • フローコンテンツ
  • セクショニングコンテンツ
  • ヘッディングコンテンツ
  • フレージングコンテンツ
  • エンベッディッドコンテンツ
  • インタラクティブコンテンツ
  • セクショニングルート
  • フォームアソシエイテッド要素
  • リステッド要素
  • サブミッタブル要素
  • リセッタブル要素
  • ラベラブル要素

 これらの中で、通常のWebサイトを制作する上で覚えておく必要があるのは、以下の7つでしょう。

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

 それぞれのカテゴリーに属する要素を紹介します(以降に登場する要素のリストは、W3CのWorking Draft 25 May 2011 の仕様書を参考にしています)。

メタデータコンテンツ

 メタデータコンテンツは、文書のメタデータやスタイルに関係する要素が属します。このカテゴリーの要素は、Webブラウザーの画面上には基本的に描画されません。

base command link meta noscript script style title

フローコンテンツ

 文書に使われるほとんどの要素は、フローコンテンツに属します。

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 テキスト

セクショニングコンテンツ

 セクショニングコンテンツは、セクションの範囲を定義する要素が属します。

article aside nav section

ヘッディングコンテンツ

 ヘッディングコンテンツは、セクションのヘッダーを表します。

h1 h2 h3 h4 h5 h6 hgroup

フレージングコンテンツ

 フレージングコンテンツは、文書のテキストのことです。フレージングコンテンツに分類される要素のコンテンツモデルは、空でなければ、多くがフレージングコンテンツとなっています。

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 テキスト

エンベッディッドコンテンツ

 エンベッディッドコンテンツは、文書に他のリソース(画像や動画など)を埋め込んだり、他の語彙(svgなど)を挿入したりする要素が属します。

audio canvas embed iframe img math object svg video

インタラクティブコンテンツ

 a要素やbutton要素、操作ボタンを持つaudio要素など、ユーザーが操作できる要素が属します。

a audio(controls属性を持つ場合) button details embed iframe img(usemap属性を持つ場合) input(type属性の値がhiddenでない場合) keygen label menu(type属性の値がtoolbarの場合) object(usemap属性を持つ場合) select textarea video(controls属性を持つ場合)


セクショニングルート

blockquoteなどの一部の要素は、セクショニングルートというカテゴリーに属します。通常の要素は、見出しから判別されたアウトラインによる階層構造に含まれますが、セクショニングルートに属する要素はアウトラインに影響しません。セクショニングルートに属する要素は、通常のアウトラインから切り離され、独立したアウトラインを持ちます。

blockquote body details fieldset figure td


著者:浜 俊太朗 (はま・しゅんたろう)

著者写真

ライブドアで働くマークアップエンジニア/ディレクター。
ブログ「hamashun.me」はコーディングに限定せずさまざまな話題を扱っている。主な著書に「一週間でマスターするXHTML & CSS for Windows」(毎日コミュニケーションズ刊)がある。趣味はカメラとネットゲームと椅子。

前へ 1 2 3 次へ

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています