HTML5のカテゴリーについて / HTML5マークアップ時の基本

HTML5のカテゴリーについて

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

【カテゴリー一覧】

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

ただし、各要素は1つのカテゴリーとはかぎらず、複数のカテゴリーに属することもあります。ってここまでだと何のことやらさっぱりですよね。

どうやらHTML4の時に、インライン要素の中にブロック要素が使えなかったのと同様で、属するカテゴリによってルールがあるようです。

そこで各カテゴリーを理解するために、いつも大変参考にさせていただいている『HTML5.jp』のサイトを基に各カテゴリー概要をまとめてみました。

メタデータ・コンテンツ

ドキュメントの｢メタデータ・スタイル・スクリプト｣の定義などです。

主に属する要素：

『 base command link meta noscript script style title 』

上記の要素を見てみると、headタグ内に記述するものが多い気がしますね。基本的には画面に直接表示されない要素になるようです。

例えば、｢title要素｣は表示画面には現れません。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5でサイトをつくろう</title>
・
・
</head>

フロー・コンテンツ

ドキュメント内に現れるコンテンツ全般がこのカテゴリーに属します。

主に属する要素：

『 a abbr address area (map 要素の子孫だった場合) article aside audio b bdi bdo blockquote br button canvas cite code command datalist del details dfn div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hgroup hr i iframe img input ins kbd keygen label map mark math menu meter nav noscript object ol output p pre progress q ruby s samp script section select small span strong style（scoped 属性が存在している場合) sub sup svg table textarea time ul var video wbr Text 』

要素を見てみると、body内に記述するほとんどの要素が属しているのがわかります。

ここで、HTML5から追加されたstyle要素のscoped 属性についてメモしておきたいと思います。

上記の要素の中にある太字のstyle要素は、以前までhead要素の中でしか使用できませんでしたが、HTML5ではscoped 属性を指定することで、フロー・コンテンツが期待される場所にマークアップできるようになりました。

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

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

<p>ここのカラーはデフォルトです。</p>
<section>
	<style scoped="scoped">
		p { color: red; }
	</style>
	<h1>style要素のscoped属性について</h1>
	<p>ここのカラーは赤色になります。</p>
</section>

scoped属性は親要素の中にスタイルを適応できるので、sectionの外にあるp要素には適応されません。ただし、現在の主要ブラウザはscoped属性のサポートを行っていないようなので、上記サンプルソースを試すと両方とも赤色になってしまいます。

この問題は、ブラウザの対応待ちになってしまいますが、それも含めてstyle要素もフロー・コンテンツになる場合があることを覚えておきたいと思います。

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

見出しとその内容のように、階層構造(※アウトライン)になる範囲を定義する要素になります。

※アウトラインについては≪『アウトライン』について｜HTML5マークアップ時の基本≫の記事を参照ください。

主に属する要素：

『 article aside nav section 』

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

<section>
　　　<h1>HTML5でサイトをつくろう</h1>
　　　<p>h1タイトルの説明文・・・・・・</p>
　　　<section>
　　　　　　<h2>HTML5でサイトをつくろう</h2>
　　　　　　<p>h2タイトルの説明文・・・・・・</p>
　　　</section>
</section>

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

HTML5でサイト構築する場合、このセクショニング・コンテンツを理解することが非常に重要になってきますので、今後、より理解を深めるため各要素ごとピックアップして勉強していきたいと思います。

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

見出しに関連する要素が属します。

主に属する要素：

『 h1 h2 h3 h4 h5 h6 hgroup 』

これは名前の通り分かりやすいですね。また、hgroupはHTML5から追加された新要素ですが、見出しと副題などをグループ化することができる要素です。

<section>
	<hgroup>
		<h1>HTML5でサイトをつくろう</h1>
		<h2>HTML5とCSS3の情報とサンプルをまとめました</h2>
	</hgroup>
	<p>HTML5とは・・・・・</p>
</section>

hgroup要素の詳しい使い方については、今後投稿しようと思っています。

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

ドキュメントのテキストのことですが、pタグやdiv・sectionではなく、段落の中にあるテキスト範囲を示す場合に使う要素が属します。

主に属する要素：

『 a (フレージング・コンテンツのみを含んでいる場合) abbr area (map 要素の子孫の場合) audio b bdi bdo br button canvas cite code command datalist del (フレージング・コンテンツのみを含んでいる場合) dfn em embed i iframe img input ins (フレージング・コンテンツのみを含んでいる場合) kbd keygen label map (フレージング・コンテンツのみを含んでいる場合) mark math meter noscript object output progress q ruby s samp script select small span strong sub sup svg textarea time var video wbr Text 』

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

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

【フレージング・コンテンツにならない場合】

<a href="#"><h1>HTML5でサイトをつくろう</h1></a>

【フレージング・コンテンツになる場合】

<h1><a href="#">HTML5でサイトをつくろう</a></h1>

ソースを見てみると、h1(ヘッディング・コンテンツ)がa要素の中に入った場合はフレージング・コンテンツになっていません。つまり条件にあった通り、h1がフレージング・コンテンツに属していないので、a要素がフレージング・コンテンツにならないのがわかります。

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

ドキュメントに外部のリソースを組み込む（canvasなど）コンテンツや、SVG・MathMLなどのHTMLではない別の言語で表されるコンテンツが属します。

主に属する要素：

『 audio canvas embed iframe img math object svg video 』

個人的には興味深い要素ばかりです。これらの要素の魅力はいろいろとクローズアップされていますが、このブログでも各要素のサンプルを作って紹介していきたいと思っています。

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

ハイパーリンクなどのユーザーが何かしらの操作ができるコンテンツが属します。

主に属する要素：

『 a audio (controls 属性が存在している場合) button details embed iframe img (usemap 属性が存在している場合) input (type 属性が Hidden 状態でない場合) keygen label menu (type 属性が toolbar 状態の場合) object (usemap 属性が存在している場合) select textarea video (controls 属性が存在している場合) 』

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

<button name="sample" type="button" onclick="alert('インタラクティブ・コンテンツです！')" >
クリック！
</button>

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

セクショニング・ルート

自分自身のアウトラインを持つ独立したコンテンツとしてみなされるコンテンツが属します。しかし、これらの要素の中にあるセクションと見出しは、祖先のアウトラインには現れません。

主に属する要素：

『 blockquote body details fieldset fiqure td』

少し分かりにくいカテゴリーと感じたので、サンプルソースを確認しながら理解していきたいと思います。

例えば、body要素の中でblockquote要素が使われた場合、blockquote要素の見出しやセクションはbody要素のアウトラインには現れないということです。

<body>
	<h1>HTML5でサイトをつくろう</h1>
    　　<p>HTML5でサイトをつくるには・・・</p>
    <blockquote>
    	<h2>HTML5とは(引用見出し)</h2>
        <p>2007年4月に.....(引用文)</p>
　　</blockquote>
</body>

上記のソースではbody要素のアウトラインにblockquote内のh2は現れないということになります。

最後に

以上の8っつが主に代表されるカテゴリーですが、これらのカテゴリーは【コンテンツ・モデル】を考える場合に、とても重要になってくるのでしっかり理解しておきたいと思います。

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

参考サイト：

『コンテンツ・モデル』　【HTML5.JP】
『見出しとセクション』　【HTML5.JP】

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

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

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

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

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

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

HTML5のカテゴリーについて / HTML5マークアップ時の基本

HTML5のカテゴリーについて

メタデータ・コンテンツ

フロー・コンテンツ

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

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

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

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

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

セクショニング・ルート

最後に

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

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

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

この記事を書いた人

最近書いた記事

この記事に関連する記事

サイト内検索

最新のエントリー

まずはここから始めよう！作業効率を早めるPhotoshopとIllustratorのショートカットまとめ（ファイル操作・コピペ・ズーム関連）

Instagram（インスタグラム）の基本的な運用やマーケティング、活用事例の勉強に参考にしたサイトや記事まとめました。

アプリ風インターフェイスのフォトギャラリーをCSS3で作成する【jQuery連載17】