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

このあたりで「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つのカテゴリーではなく、別な分類で、「セクションのルートになれる特別な要素」です。
ルートって「第1階層」と言うか、最初の段階ってイメージです。「roots」の直訳は、根元・起原、始祖。

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

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

次回予告

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

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2017/08 | 09
- - 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
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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