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

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

次回予告

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
11 | 2023/12 | 01
- - - - - 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 29 30
31 - - - - - -
Archive
Profile

yuki★hata

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

メールフォームはこちら

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