トップ > スキル : Web > HTML5

Web

HTML5の概要2

カテゴリ

HTML5では、要素ごとに、その目的に応じたカテゴリを割り当てています。HTML4では、その要素がブロック要素なのか、インライン要素なのかを定義して、インライン要素の中にはブロック要素を含めることはできないというルールを規定していました。HTML5では、HTML4と比較して、より厳密に定義されています。

HTML5におけるカテゴリは以下のようになっています。

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

HTML5の要素は、定義されているいずれかのカテゴリに属していますが、1つの要素が複数のカテゴリに属していることもあります。また、中にはどのカテゴリにも属していない要素もあります。

カテゴリの関係は、大まかに以下のようになります。

カテゴリ

HTML5の要素のほとんどはフロー・コンテンツに属します。、そのフロー・コンテンツに属する要素は、さらにさまざまなカテゴリにも属しています。なお、一部のメタデータ・コンテンツに属する要素が、フロー・コンテンツから外れています。

HTML5では、どの要素にどのコンテンツ(要素)を入れてよいかを厳密に規定していますので、このカテゴリ関係に外れたマークアップをしてはいけません。

要素ごとに定義されているカテゴリの意味は次のようになります。

フロー・コンテンツ

基本的に、ドキュメント内に現れるコンテンツ全般になります。このカテゴリに属する要素は以下の通りです。

a、abbr、address、article、aside、audio、b、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、samp、script、section、select、small、span、strong、sub、sup、svg、table、textarea、time、ul、var、video、テキスト


メタデータ・コンテンツ

主に、ドキュメントのメタデータやスタイルの定義やビヘイビアに分類される要素になります。ブラウザ上には直接表示されないような要素です。このカテゴリに属する要素は以下の通りです。

base、command、link、meta、noscript、script、style、title


ヘッディング・コンテンツ

このカテゴリは、見出しを表します。このカテゴリに属する要素は以下の通りです。

h1、h2、h3、h4、h5、h6、hgroup


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

このカテゴリは、章や節のように、見出しからその内容までを含んだ範囲(セクション)を定義します。このカテゴリに属する要素は以下の通りです。

article、aside、nav、section


フレージング・コンテンツ

このカテゴリは、ドキュメントのテキストのことを表します。段落の中にあるテキストの範囲を指し示す要素がこのカテゴリに属します。HTML4におけるインライン要素に近い概念を持ちますので、p要素のように段落そのものを表す要素や、div要素やsection要素のように複数の段落をまとめることができる要素は、このフレージング・コンテンツには属しません。このカテゴリに属する要素は以下の通りです。

abbr、audio、b、bdo、br、button、canvas、cite、code、command、datalist、dfn、em、embed、i、iframe、img、input、kbd、keygen、label、mark、math、meter、noscript、object、output、progress、q、ruby、samp、script、select、small、span、strong、sub、strong、sub、sup、svg、textarea、time、var、video、テキスト

条件付きでフレージング・コンテンツになる要素は以下の通りです。

  • a(この要素の中にフレージング・コンテンツしかない場合)
  • area(この要素がmap要素の中にある場合)
  • del(この要素の中にフレージング・コンテンツしかない場合)
  • ins(この要素の中にフレージング・コンテンツしかない場合)
  • map(この要素の中にフレージング・コンテンツしかない場合)

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

ドキュメント中に外部のリソースをインポートするコンテンツや、HTMLではない別の言語で表されるコンテンツのことです。外部のリソースの例では、画像、プラグイン、フレーム、ビデオ、Canvasなどがあります。また、HTMLではない別の言語の例としては、SVGやMathMLなどがあります。このカテゴリに属する要素は以下の通りです。

audio、canvas、embed、iframe、img、math、object、svg、video


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

ユーザが何かしらの操作をすることができるコンテンツを表します。例としては、ハイパーリンクやクリックすることで状態が変化するものが該当します。このカテゴリに属する要素は以下の通りです。

a、button、details、embed、iframe、keygen、label、select、textarea

条件付きでインタラクティブ・コンテンツになる要素は以下の通りです。

  • audio(control属性が指定された場合)
  • img(usemap属性が指定された場合)
  • input(type属性が“hidden”でない場合)
  • menu(type属性が“toolbar”でない場合)
  • object(usemap属性が指定された場合)
  • video(control属性が指定された場合)

セクショニング・ルート

一部の要素は、セクショニング・ルートと呼ばれるカテゴリに属します。通常、ドキュメントは、章や節という階層を持っています。このセクショニング・ルートに属する要素の中のコンテンツは、その前後のコンテンツとは切り離されたものとして見なされます。つまり、独立したコンテンツのように見なされます。このカテゴリに属する要素は以下の通りです。

blockquote、body、details、fieldset、figure、td

【HTML5の基礎知識2】