HTML5の基礎知識～コンテンツモデルとカテゴリ～
素人が書く備忘録
HTML５のカテゴリとコンテンツモデルについて(基本的にはHTML5.2を元に記載。)
概要
HTML5より前のHTML/XHTMLは、インライン要素とブロック要素に分類されていたが、HTML5でこのような分類は廃止された。
※CSSではこの分類は引き続き使われているので完全に考えなくていいというわけではない。
セマンティック・マークアップとともに導入されたのが、コンテンツモデル。
コンテンツモデル
どの要素にどの要素が入れられるかが定義されたもの。
基本的には、子要素についてのルール。孫要素についてもルールがあるものもある。
どの要素が入れられるかの定義は、主要カテゴリで定義されるが、それ以外で定義されるものもある。
(トランスペアレントとかパルパブルコンテンツとか・・これは別記事で書こう・・・('ω')ノ)
例 body要素のコンテンツモデルはフローコンテンツ →body要素の子要素になれるのは、フローコンテンツに属している要素
主要カテゴリ
7つに分けられていて、多くの要素はカテゴリに属している。
複数のカテゴリに属する要素もある。
カテゴリに属さない要素もある。
メタデータコンテンツ(Metadata Content)
メタデータの設定。
属している要素は、
base、link、meta、noscript、script、style、template、title
フローコンテンツ(Flow Content)
body内で使われる要素はほとんどこのカテゴリに属する。
属している要素は、
a、abbr、address、area(map要素に含まれている場合)、article、aside、audio、b、bdi、bdo、blockquote、br、button、canvas、cite、code、data、datalist、del、details、dfn、dialog、div、dl、em、embed、fieldset、figure、footer、form、h1、h2、h3、h4、h5、h6、header、hr、i、iframe、img、input、ins、kbd、label、link(body要素で許可されている場合)、main、map、mark、math、meter、nav、noscript、object、ol、output、p、picture、pre、progress、q、ruby、s、samp、script、section、select、small、span、strong、style、sub、sup、svg、table、template、textarea、time、u、ul、var、video、wbr、文字列
セクショニングコンテンツ(Sectioning Content)
見出しとフッターの範囲を定義。
属している要素は、
article、aside、nav、section
ヘッディングコンテンツ(Heading Content)
セクションのヘッダーを定義。
属している要素は、
h1、h2、h3、h4、h5、h6
フレージングコンテンツ(Phrasing Content)
文章や文章をマークアップする要素を定義。
属している要素は、
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、label、link(body要素で許可されている場合)、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、文字列
エンベッディッドコンテンツ(Embedded Content)
別のリソースをインポートするコンテンツ、または名前空間の挿入する要素を定義。
属している要素は、
audio、canvas、embed、iframe、img、math、object、picture、svg、video
インタラクティブコンテンツ(Interactive Content)
ユーザーとの対話を目的としたコンテンツを定義。
属している要素は、
a(href属性が指定されている時)、audio(controls属性が指定されている時)、button、details、embed、iframe、img(usemap属性が指定されている時)、input(type属性がhidden以外の時)、label、select、textarea、video(controls属性が指定されている時)、tabindex属性が指定されている要素
どの要素がどのカテゴリに属しているかは以下のものがわかりやすそうです！
webgoto.net
参照元：
HTML 5.2: 3. Semantics, structure, and APIs of HTML documents
