HTML5のカテゴリーの種類についてまとめました【MdN連載第6回目】

HTML4では、要素ごとにブロック要素、インライン要素というわけ方があり、インライン要素の中にブロック要素が使えなかったりなどタグの使い方にルールがありましたが、HTML5ではブロック要素、インライン要素というわけ方はしなくなり、要素ごとに目的に応じたカテゴリーという形で分けられています。今回はそのカテゴリーについてまとめてみたいと思います。

MdN Design Interactiveの第6回目のURLはこちらになります。
HTML5の「カテゴリー」についてまとめよう

HTML5の各要素は、目的に応じたカテゴリーに属しています。

• メタデータ・コンテンツ
• フロー・コンテンツ
• セクショニング・コンテンツ
• ヘッディング・コンテンツ
• フレージング・コンテンツ
• エンベッディッド・コンテンツ
• インタラクティブ・コンテンツ
• セクショニング・ルート

HTML5の要素のほとんどが上記のカテゴリーのどれかに属しますが、必ずしも1つではなく、1つの要素が複数のカテゴリーに属することもあります。また中にはどのカテゴリーに属さない要素もあります。通常のWEBサイト制作をする上では上の7つのコンテンツと「セクショニング・ルート」についての役割をまず理解しましょう。

メタデータ・コンテンツ

メタデータ・コンテンツは主にドキュメントのメタデータやスタイルやJavascriptの定義など基本的にブラウザ上には直接表示されないような要素になります。HTML4やxhtmlの際にも内に記述される要素とするとイメージがつきやすいかと思います。

このカテゴリーには以下の要素が属しています。

メタタグ、ページのタイトル、CSSやjavascriptの読み込みなどに使用されます。

フロー・コンテンツ

フロー・コンテンツは基本的にはドキュメント内に現れるコンテンツ全般を表します。
要素を見てみると、body内に記述するほとんどの要素が属しているのがわかります。

このカテゴリーには以下の要素が属しています。

一覧を見るとstyle要素が条件付でフロー・コンテンツになっているので気になる方もいるかと思いますので少し触れてみたいと思います。

style要素は、HTML5ではscoped 属性を指定することで、フロー・コンテンツに属します。

これはstyle要素の親要素の中にだけスタイルを適用させることができます。

例えば、section要素内に使用した場合です。

scoped属性は親要素の中にスタイルを適応できるので、sectionの外にあるp要素には適応されません。

ただし、現在の主要ブラウザはscoped属性のサポートを行っていないようなので、上記サンプルソースを試すと両方とも赤色になってしますので特定の部分だけ色を変えたい場合などはいままでどおりclassを使った方がよいです。

サイト制作ではあまりstyle要素を使わないかもしれませんが、条件付でフロー・コンテンツカテゴリーに入る例として書いてみました。

セクショニング・コンテンツ

セクショニング・コンテンツは章・節・項のように、見出しとその内容というように、階層構造になる範囲を定義する要素になります。

セクショニング・コンテンツ

こちらは前回までにでてきた新要素の「article aside nav section」ですね。これらHTML5で文書構造を作成するのに必要な要素がセクショニング・コンテンツとなります。HTML5でのページ作成で一番多く目にする新要素だと思います。

見出しから内容までの範囲を定義するコンテンツということですが、section要素を例にサンプルソースを書きましたので確認してみたいと思います。

サンプルソースを見ると、section要素ごとに見出しと内容があるのを確認できます。

HTML5でサイト構築する場合、このセクショニング・コンテンツを理解することが非常に重要になってきますので、この4つの要素については以前の記事にまとめてあります。

• HTML5の勉強を始めた際に使い方に迷う新要素「article要素」の基本と使い方をまとめてみました
• HTML5の勉強を始めた際に使い方に迷う新要素「section要素」の基本と使い方をまとめてみました
• HTML5で新しく定義された新要素をまとめよう

ヘッディング・コンテンツ

ヘッディング・コンテンツはセクションのヘッダー関連する要素が属します。

これは名前の通り分かりやすいですね。いままでのh要素とhgroupはHTML5から追加された新要素ですが、見出しと副題などをグループ化することができる要素です。こちらはドキュメントの先頭のヘッダー部分というだけでなく、原稿のセクションのあたる部分のヘッダーにも使われます。

新要素hgroupについては要素については以前の記事にまとめてあります。

• HTML5で新しく定義された新要素をまとめよう
• 『hgroup要素』 / HTML5新要素一覧　
• HTML5の勉強を始めた際に使い方に迷う新要素「article要素」の基本と使い方をまとめてみました
• HTML5の勉強を始めた際に使い方に迷う新要素「section要素」の基本と使い方をまとめてみました

フレージング・コンテンツ

フレージング・コンテンツはドキュメントのテキストのことですが、p要素のように段落そのものを表す要素やdiv要素やsection要素のように複数の段落をまとめるような要素は該当しません。段落の中にあるテキスト範囲を示す場合に使う要素が属します。

span要素、strong要素、em要素などからも分かるように、HTML4でいうインライン要素に近い概念のようです。

上記要素の中に赤字でa要素の中にフレージング・コンテンツしかない場合はフレージング・コンテンツになるという条件がありますが、さらにフレージング・コンテンツの理解を深めるためにa要素を例にサンプルソースを書いてみます。

ソースを見てみると、h1(ヘッディング・コンテンツ)がa要素の中に入った場合はフレージング・コンテンツになっていません。これはh1要素がフレージング・コンテンツに属していないので、それを囲んだa要素がフレージング・コンテンツにならない形になります。

エンベッディッド・コンテンツ

エンベッディッド・コンテンツはドキュメントに外部のリソースを組み込むコンテンツや、HTMLではない別の言語で表現するコンテンツを表します。外部のリソースの例としては、画像、プラグイン、フレーム、ビデオ、canvasなどが挙げられます。またSVG・MathMLなどのHTMLではない別の言語で表されるコンテンツが属します。

video要素、audio要素の基本などはこちらの記事にまとめてあります。

• 絶対に覚えておきたいHTML5の『audio要素』超基本を知る!!
• 絶対に覚えておきたいHTML5の『video要素』超基本を知る!!
• 『canvas』要素の勉強をする時の参考サイトまとめました

インタラクティブ・コンテンツ

インタラクティブ・コンテンツはユーザーが何か操作をすることができるコンテンツを表します。たとえばハイパーリンクやクックすることで状態を変化させるものが該当します。

ユーザーが何かしらの操作ということで、クリックできるものや、form関連が多いですね。その中でも分かりやすいクリック関連のbutton要素を例にサンプルソースを書いてみました。

このボタンをクリックするとアラートが表示されますが、ボタンをクリックするのはユーザーですからbutton要素がインタラクティブ・コンテンツに属しているのが分かります。

セクショニング・ルート

一部の要素は、セクショニング・ルートと呼ばれるカテゴリーに属します。通常ドキュメントは章・節・項などの階層を持ちます。しかし、セクショニング・ルートに属する要素の中のコンテンツは、その前後のコンテンツとは独立したコンテンツのようにみなされます。これらの要素の中にあるセクションと見出しは、祖先のアウトラインには現れません。

以上の7つが主に代表されるカテゴリーとプラスして覚えたいセクショニング・ルートですが、これらのカテゴリーは【コンテンツ・モデル】を考える場合に、とても重要になってくるのでしっかり理解しておきましょう。

また、コンテンツ・モデルについては次回の記事で取り上げる予定です。

今回の記事で参考にした本

徹底解説HTML5マークアップガイドブック

HTML5の新要素や基本的なマークアップ方法について丁寧に解説が書かれています。
HTML5でサイトを構築する際やこのBlogの記事を書く時の参考にしています。他にもビジュアル系API編もcanvas要素の勉強用に持っています。

徹底解説HTML5マークアップガイドブック
最終草案対応版―全要素・全属性完全収録

「最終草案対応版―全要素・全属性完全収録」としてverが変わりました。すでに同じ本を持っている場合は追加で買わなくても大丈夫だとおもいましたがなにがなくなって追加されたか興味がありましたので両方買って見ました。

ブログを作成する際に参考にした本はこちらにまとめてあります。