ほんっとにはじめての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属性」が指定されていないことが条件です。

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

次回予告

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

関連記事

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

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

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。