[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つのカテゴリー(エンベッディド、インタラクティブ、フレージング、フロー)に入ると示しています。
セクショニング・ルート
ブルーの破線の囲みの中は、セクショニング・ルートと呼ばれる特別な要素です。
ルートとは 第1階層、最初の段階といった意味。
「セクショニング・ルート」である要素はの中にある「セクションと見出し」は、祖先のアウトラインと無関係になります。外側から影響を受けない独立した中身を持っていられる要素です。
どのカテゴリーにも属さない要素
どのカテゴリーにも属さない要素(図の右側の白地のところ)も書いておきました。
これらは <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、要素間空白でないテキスト。
次回の「コンテンツ・モデル」での話ですが、
「フロー・コンテント」または「フレージング・コンテント」を内包できる要素は、その中に「パルパブル・コンテンツ」を1個以上持つ必要があります。
しかもその「パルパブル・コンテンツ」は「hidden属性」が指定されていないことが条件です。
ただこのルール、それほど厳密なものではないらしく、後でスクリプトで内容を入れるために要素内が空になっている場合や、テンプレートの一部の場合は、空でもいいとされています。
次回予告
次回は「コンテンツ・モデル」について。各要素の「置き方のルール」です。
- 関連記事
-
- (ちょっとメモ)MIMEタイプ
- [41] base でベースの URL を示そう
- [40] メタデータ・コンテンツって何?
- (ちょっとメモ)HTML5の文法チェックサイト
- [39] 全要素に使える「HTML5グローバル属性」を見てみよう
- [38-2] 「コンテンツ・モデル」一覧
- [38-1] 「コンテンツ・モデル」で要素のルールを見てみよう
- [37] HTML5要素の「カテゴリー」を見てみよう
- [36] コンテンツをまとめる figure と、そのキャプションの figcaption
- [35] 内容の区切りを示す hr 要素
- [34] 書字方向を指定する bdo要素と 書字方向を隔離する bdi要素
- [33-2] 単語の途中でも改行させるCSS「word-wrap: break-word」
- [33-1] 改行可能位置を示す wbr要素 を使ってみよう
- [32] その他のプログラム関連を示す samp、kbd、var、data要素
- [31-2] pre 要素と同じ表示をするCSS「white-space : pre」
初心者にも使いやすい(と思う)レンタルサーバー
「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは
スターサーバー
(ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。
ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー
。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。
スポンサーリンク