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

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

最終更新日：-0001年11月30日　（初回投稿日：2012年02月15日）

このあたりで「HTML5要素のカテゴリー」をやっておこうと思います。
まだ登場してない要素はけっこうありますけどね。フォームの要素（<form><input><select>など）や、コンテンツ組み込み要素（<object><iframe><canvas>など）や、メタデータ要素、インタラクティブ要素などが残ってますね。

今回は「各要素のカテゴリー分類図」も制作。こうやって全貌を見るとわかりやすいです。

HTML4 の時は、要素は「ブロック要素・インライン要素・その他」なんて分け方で「インライン要素の中にブロック要素を置いちゃだめ」などのルールがありましたが、
HTML5では「ブロック・インライン」という考え方が無くなり、もうちょっと詳しく分類されます。（でも…「フレージング・コンテンツ」って言ったら「インラインかな？」なんていうイメージは生きてると思う。）

要素を配置するルール「コンテンツ・モデル（次回やります）」にも、今日のカテゴリー分けは深く関わってきます。

カテゴリーは7種類

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

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

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

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

自分の中に独立したセクションを持つ事ができる要素。自分がセクションのルートになれる要素です。

各要素のカテゴリー分け

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

※赤字の要素は、重複して他のカテゴリーにも含まれる要素です。
他のカテゴリーにも存在するので探してみてください。「そのカテゴリーに含まれる場合の条件」を（）内に書いておきました。
※カテゴリーに該当しない要素（html, headなど）も書いときました（白地にある要素です）。

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

図の右側には、どのカテゴリーにも属さない要素（白地のところにいるモノ）もありますね。
これらは<html><head><body>などHTMLの骨格となる要素か、<li> <dt> <dd> <tr> <td> <rt> など「ある要素の子要素」になる要素です。
カテゴリーに入っていない要素がどんだけあるか、またどんな要素があるかと思って書き出してみました。

セクショニング・ルート

図の右の方にあるブルーの破線の囲みの中は「セクショニング・ルート (Sectioning roots)」と呼ばれる要素です。
これはHTML5の7つのカテゴリーではなく、別な分類で、「セクションのルートになれる特別な要素」です。
ルートって「第１階層」と言うか、最初の段階ってイメージです。「roots」の直訳は、根元・起原、始祖。

というわけで、「セクショニング・ルート」である要素は、自分が含むセクションを独立させて持っている事ができる。自分の中身を親要素に影響を与えないで持っていられる要素です。
<body> <blockquote> <details> <fieldset> <figure> <td>の6個だけですね。

<body>は当たり前ですね。<blockquote>は何となくわかるけど、<td>は「へー！そうか」ってかんじです。<td>は<table>の子要素です。（<details> <fieldset>はこれからやる要素です。）
前回やった<figure>は、中身が独立していなきゃいけない、という理由がこれでわかります。

次回予告

次回は、これらのカテゴリーに分けられた各要素の「置き方のルール」についてです。
このルールを「コンテンツ・モデル」っていいます。

関連記事

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

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

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

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

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