ほんっとにはじめてのHTML5とCSS3：[37] HTML5要素の「カテゴリー」を見てみよう

[37] HTML5要素の「カテゴリー」を見てみよう

最終更新日：2017年11月10日　（初回投稿日：2012年02月15日）

今回は、 HTML5要素のカテゴリー を見てみましょう。

HTML5より前は、要素は「ブロック要素・インライン要素・その他」といったゆるい分類でしたが、HTML5では「ブロック・インライン」という分類は無くなり、より詳細な分類がされています。
これは、要素を配置するルール「コンテンツ・モデル」にも深く関係します。
（「コンテンツ・モデル」は次回やります）

カテゴリーは7種類

HTML要素のカテゴリーは7つです。

メタデータ・コンテント Metadata content	HTMLの情報、外部ファイル読み込み、CSSやスクリプトを指定するなど、ベースを整える役割をするもの。
フロー・コンテント Flow content	ほとんどの要素はコレに分類される。
ヘディング・コンテント Heading content	見出し（ヘディング）になるもの。暗示的なアウトラインを作る。
セクショニング・コンテント Sectioning content	セクションをまとめるもの。アウトラインを持つ
フレージング・コンテント Phrasing content	テキスト（フレーズ）に関わるもの。
エンベッディド・コンテント Embedded content	外部リソースを埋め込むためもの。画像、音、ビデオ、他のHTML などを読み込む。
インタラクティブ・コンテント Interactive content	ユーザーによる操作（クリック・タップやキーボードによる）に対応するもの。

また、上の7つとは別に「セクショニング・ルート」という特別な要素があります。

セクショニング・ルート
Sectioning roots

自分の中に独立したセクションを持つ事ができる要素。これらの中にあるセクションと見出しは、祖先のアウトラインに無関係。

各要素のカテゴリー分け

各カテゴリーの関係と、それに属する要素は下図のようになります。

※赤字の要素は、重複して他のカテゴリーにも含まれる要素です。

【図の見かた】
★例えば赤字の a要素は「href属性」あれば「フロー」「フレージング」「インタラクティブ」に属す（無ければ「インタラクティブ」には属さず「フロー」「フレージング」に属す）と示しています。
★例えば、いちばん枠が重なってるところ（Embedded contentの右下部分）の要素は、4つのカテゴリー（エンベッディド、インタラクティブ、フレージング、フロー）に入ると示しています。

セクショニング・ルート

ブルーの破線の囲みの中は、セクショニング・ルートと呼ばれる特別な要素です。
ルートとは第１階層、最初の段階といった意味。

「セクショニング・ルート」である要素はの中にある「セクションと見出し」は、祖先のアウトラインと無関係になります。外側から影響を受けない独立した中身を持っていられる要素です。

どのカテゴリーにも属さない要素

どのカテゴリーにも属さない要素（図の右側の白地のところ）も書いておきました。
これらは <html> <head> <body> などHTML文書の骨格となる要素か、<li> <dt> <dd> <rt> <caption> など「ある要素の専用の子要素」になる要素ですね。

「パルパブル・コンテント」カテゴリーもあります

パルパブル・コンテント（Palpable content）というカテゴリーもあります。

Palpable（パルパブル）は、「明瞭な」「明らかな」といった意味。
ブラウザ上で「明らかにコンテンツと認識できる内容の要素」といったところかな。

以下がパルパブル・コンテントの要素です。けっこうあります。
a、abbr、address、article、aside、audio (controls属性がある場合)、b、bdi、bdo、blockquote、button、canvas、cite、code、data、details、dfn、div、dl (子要素に少なくとも1つの「name-value」グループがある場合)、em、embed、fieldset、figure、footer、form、h1〜h6、header、i、iframe、img、input (type属性がhiddenじゃない場合)、ins、kbd、keygen、label、main、map、mark、math、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、要素間空白でないテキスト。

次回の「コンテンツ・モデル」での話ですが、
「フロー・コンテント」または「フレージング・コンテント」を内包できる要素は、その中に「パルパブル・コンテンツ」を１個以上持つ必要があります。
しかもその「パルパブル・コンテンツ」は「hidden属性」が指定されていないことが条件です。

ただこのルール、それほど厳密なものではないらしく、後でスクリプトで内容を入れるために要素内が空になっている場合や、テンプレートの一部の場合は、空でもいいとされています。

次回予告

次回は「コンテンツ・モデル」について。各要素の「置き方のルール」です。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「レンタルサーバーはどこがいい？」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー （ミニバードがスターサーバになりました）。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ！もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。