HTML5 カテゴリーについて HTMLの基本編 vol.5

カテゴリーについて

HTML5より定義されたカテゴリーコンテンツモデルについての備忘録です。今回はカテゴリーについて記載いたします。

長文になってしまうため、コンテンツモデルについては次回記載します。

カテゴリーとは

HTML5では大半の要素は下記の7つのカテゴリーに分類されます。なお多くの要素は一つではなく複数のカテゴリーに属していたりします。

大半は7つのカテゴリーに属していますが、どのカテゴリーにも属さない要素もあります。

7つのカテゴリーについて

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

メタデータ・コンテンツはページのタイトルや外部ファイルのリンクなどを指定する要素が分類されています。この部分はブラウザには表示されない要素になります。

メタデータ・コンテンツの要素
base、command、link、meta、noscript、script、style、title

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

フローコンテンツは、<body>~</body>内ならどこにでも記述可能な要素が対象ですので、基本的に大半の要素はここに分類されます。

フローコンテンツの要素
a、abbr、address、area(map要素の子孫だった場合)、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(scoped属性が存在している場合)、sub、sup、svg、table、textarea、time、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、 keygen、 label、 map(フレージング・コンテンツのみを含んでいる場合)、 mark、 math、 meter、 noscript、 object、 output、 progress、 q、 ruby、 s、 samp、 script、 select、 small、 span、 strong、 sub、 sup、 svg、 template、 textarea、 time、 u、 var、 video、
wbr、 テキスト

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

HTML以外のアプリケーションやコンテンツを埋め込むための要素がここに分類されます。

エンベッディッド・コンテンツの要素
audio、 canvas、 embed、 iframe、 img、 math、 object、 svg、 video

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

インタラクティブ・コンテンツは閲覧者が画面でクリックなどの操作を可能するための要素がここに分類されます。

インタラクティブ・コンテンツの要素
a(href属性があるときのみ)、audio(controls属性があるときのみ)、button、details、embed、iframe、img(usemap属性をもつときのみ)、input(type=”hidden”以外のときのみ)、keygen、label、object(usemap属性があるときのみ)、select、textarea、
video(controls属性をもつときのみ)

主要7カテゴリー以外の分類について

上記7カテゴリー以外にも下記の分類も定義されています。

パルパブル・コンテンツ(Palpable content)

Palpable(パルパブル) は日本語に訳すと「明白な」を意味します。フローコンテンツやフレージングコンテンツを入れ子にできる要素は、 hidden属性が指定されていない要素が一つ以上ある場合にパルパブルコンテンツになります。

例えばのように、コンテンツの無い記述を防ぐために、フローコンテンツやフレージングコンテンツを入れ子にできる要素は、hidden属性が指定されていない一つ以上のパルパブル・コンテンツを入れ子に記述することが推奨されています。

テキストもパルバブル・コンテンツに含まれていますので、<p>テキスト</p>と記載することで条件を満たします。

スクリプトなどで後からコンテンツを記述するために空の状態にしておくことは認められています。

パルパブル・コンテンツの要素
a、abbr、address、article、aside、audio(controls属性が存在する場合のみ)、b、bdi、bdo、blockquote、button、canvas、cite、code、data、details、dfn、div、dl(子要素として1つ以上の名前-値グループを含む場合)、em、embed、fieldset、figure、footer、form、h1、h2、h3、h4、h5、h6、header、hgroup、i、iframe、img、input(type属性がhidden以外の場合)、ins、kbd、keygen、label、main、map、mark、math、menu(子要素が1つ以上のli要素をもつ場合のみ)、meter、nav、object、ol(子要素が1つ以上のli要素を含む場合)、output、p、pre、progress、q、ruby、s、samp、section、select、small、span、strong、sub、sup、svg、table、textarea、time、u、ul(子要素が1つ以上のli要素を含む場合)、var、video、自律カスタム要素、要素内の空白文字でないテキスト

スクリプトサポート要素(Script-supporting elements)

スクリプトサポート要素は、JavaScriptなどのスクリプトを記述するための要素がここに分類されています。

スクリプトサポートの要素
script 、 template

今回はHTML5の要素のカテゴリーについてまとめました。ページの内容は知識追加・修正を行う場合があります。

コメント

  1. […] コンテンツ・モデルの大半は前回説明したカテゴリー名で定義されていますが、「特定の要素のみ配置可能」や「透明(親要素のコンテンツ・モデルを引き継ぐ トランスペアレント)」といった定義も存在します。 […]

  2. […] この入れ子に関連する内容として「カテゴリー」と「コンテンツモデル」という定義があります。この内容を今回記載すると記述内容が多くなってしまいますので、次回に備忘録を残します。 […]

タイトルとURLをコピーしました