[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属性」が指定されていないことが条件です。

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

次回予告

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

関連記事
この記事をはてなブックマークに追加

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

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

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
01 | 2018/02 | 03
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.