トップページ  > HTML5  > HTML5における要素の分類(コンテンツ・モデル)

★HTML5リファレンス

広告

■HTML5における要素の分類(コンテンツ・モデル)

HTML4.01では要素は大きくブロックレベル要素とインライン要素のいずれかに分類されていますが、 HTML5ではブロックレベル要素とインライン要素の分類は無くなります。

HTML5では、メタデータ、フロー、セクション、ヘッディング、フレージング、エンベッディッド、インタラクティブというコンテンツの種類が定義されています。 HTML5におけるこれらのコンテンツの種類の定義は「コンテンツ・モデル」と呼ばれます。

メタデータ・コンテンツ
(Metadata content)
文書情報や他の文書との関係を定義するもの
フロー・コンテンツ
(Flow content)
子孫にテキストなどを持つもの
セクショニング・コンテンツ
(Sectioning content)
見出しと概要を付けられるもの
ヘッディング・コンテンツ
(Heading content)
セクションの見出しとなるもの
フレージング・コンテンツ
(Phrasing content)
段落などの中に含まれる文節・語句など
エンベッディッド・コンテンツ
(Embedded content)
文書に他のリソースを埋め込むもの
インタラクティブ・コンテンツ
(Interactive content)
ユーザーによる操作に対応するもの

HTML5の各要素は、上記のコンテンツの種類のいずれか一つのみに分類されるのではなく、 一つの要素に対して複数のコンテンツの種類が定義されることもあります。 例えば、section要素はフロー・コンテンツであり、同時にセクショニング・コンテンツでもあります。

また、特定の属性や属性値を持った場合にだけインタラクティブ・コンテンツになるなど、条件付きで要素の種類が変化することもあります。

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

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

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

  • a
  • abbr
  • address
  • area*
  • 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
  • link*
  • map
  • mark
  • math
  • menu
  • meta*
  • meter
  • nav
  • noscript
  • object
  • ol
  • output
  • p
  • pre
  • progress
  • q
  • ruby
  • s
  • samp
  • script
  • section
  • select
  • small
  • span
  • strong
  • style*
  • sub
  • sup
  • svg
  • table
  • textarea
  • time
  • ul
  • var
  • video
  • wbr
  • Text*

* 特定の条件の場合

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

  • article
  • aside
  • nav
  • section

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

  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • hgroup

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

  • a*
  • abbr
  • area*
  • audio
  • b
  • bdo
  • br
  • button
  • canvas
  • cite
  • code
  • command
  • datalist
  • del*
  • dfn
  • em
  • embed
  • i
  • iframe
  • img
  • input
  • ins*
  • kbd
  • keygen
  • label
  • link*
  • map*
  • mark
  • math
  • meta*
  • meter
  • noscript
  • object
  • output
  • progress
  • q
  • ruby
  • s
  • samp
  • script
  • select
  • small
  • span
  • strong
  • sub
  • sup
  • svg
  • textarea
  • time
  • var
  • video
  • wbr
  • Text*

* 特定の条件の場合

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

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

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

  • a
  • audio*
  • button
  • details
  • embed
  • iframe
  • img*
  • input*
  • keygen
  • label
  • menu*
  • object*
  • select
  • textarea
  • video*

* 特定の条件の場合

■HTML5では、コンテンツ・モデルでタグの配置ルールが決まる

HTML5では、上記のコンテンツの種類に各要素が分類されることで、 どの要素の中にどの要素を配置できるかというタグの配置ルールが決まります。

HTML4.01でタグの意味を意識してマークアップしてきた人なら、 上記のコンテンツの種類の分類を知らなくてもそれほど大きな間違いをすることはないでしょうが、 文法的により正確なHTML文書を作成することを目指す場合には、 どの要素がどのコンテンツの種類に分類されているかを意識する必要があるでしょう。

<前へ 記事一覧へ 次へ>
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ