トップ > スキル : Web > HTML5

Web

HTML5の概要3

コンテンツ・モデル

コンテンツ・モデルとは、ある要素の中にどのようなコンテンツを入れてよいかを定義したもので、HTML5でマークアップする場合には意識をする必要があります。
また、すべての要素にコンテンツ・モデルが定義されています。

div要素のコンテンツ・モデルを例にすると、div要素はフロー・コンテンツに属していますので、div要素の中にはフロー・コンテンツに属している要素を入れて良いということになります。しかし、中にはカテゴリでない定義もあります。ここでは、HTML5の要素に規定されているコンテンツ・モデルを紹介していきます。

カテゴリによる制限

多くの要素のコンテンツ・モデルは、カテゴリによって定義されています。例えば、section要素のコンテンツ・モデルは、フロー・コンテンツ及びセクショニング・コンテンツと定義されています。これらのカテゴリに属する要素であれば、section要素の中に入れても良いことになります。

■正しいマークアップ例
  <section>
	<h1>・・・・</h1>
	<p>・・・・</p>
	<article>・・・</article>
  </section>
    

正しいマークアップ例を見ると、section要素に含まれている要素は、h1要素、p要素、article要素になっていますが、これらはフロー・コンテンツ、またはセクショニング・コンテンツに属しています。section要素は、フロー・コンテンツ及びセクショニング・コンテンツなので、マークアップに問題はありません。

■間違ったマークアップ例
  <section>
	<style>・・・・</style>
  </section>
	

style要素は、scopedコンテンツ属性が指定されていない限り、メタデータ・コンテンツです。よって、style要素をsection要素内にマークアップすることはできません。

特定の要素による制限

ある一部の要素のコンテンツ・モデルでは、カテゴリではなく、特定の要素に限定しているものがあります。例えば、hgroup要素のコンテンツ・モデルは、1個以上のh1~h6要素のみと定義されています。

■正しいマークアップ例
  <hgroup>
	<h1>・・・・</h1>
	<h2>・・・・</h2>
  </hgroup>
    

hgroup要素の中にマークアップできる要素は、h1~h6要素以外の要素を入れてはいけないことになります。また、「1個以上」という数にも限定されています。これは、hgroup要素の中が空っぽでないことを表しています。

■間違ったマークアップ例
  <hgroup>
	<p>・・・・</p>
	<address>・・・・</address>
  </hgroup>
  <hgroup></hgroup>
	

間違ったマークアップの例をみると、hgroup要素の中に見出し要素がまったくなく、もう一つのhgroup要素の中身が空っぽなので、このマークアップは正しくありません。

子孫の要素による制限

通常、コンテンツ・モデルの定義は、その要素の子、つまりその要素の直下に入れる要素を制限しています。その要素の子の中には何を入れて良いかは、子のコンテンツ・モデルに依存します。しかし、一部の要素では、子孫の要素を制限しているものもあります。

例えば、address要素はフロー・コンテンツに属していますが、子孫にヘッディング・コンテンツやセクショニング・コンテンツ、そしてheader要素やfooter要素を入れてはいけないことになっています。

また、h1要素はフロー・コンテンツとヘッディング・コンテンツに属していますので、address要素内にh1要素を入れることはできません。

一方、div要素はフロー・コンテンツに属していていますが、ヘッディング・コンテンツやセクショニング・コンテンツには属していないので、address要素の中にdiv要素を入れることはできます。

しかし、コンテンツ・モデルでは「子孫」という用語を使っています。これは、直下の要素は問題はないが、その配下の孫要素などに入れてはいけない要素が含まれると正しいマークアップではないということになります。

■間違ったマークアップ例
  <address>
	<div>
    	    <section>・・</section>
	</div>
  </address>
	

間違ったマークアップ例を見てみましょう。address要素の子要素(直下の要素)はdiv要素が入っています。address要素もdiv要素もフロー・コンテンツで、親子関係としては問題ありません。また、div要素の子要素はsection要素になっていますが、これもコンテンツ・モデルの定義において問題はありません。

しかし、address要素からみるとsection要素は孫要素の関係になります。address要素内には、セクショニング・コンテンツであるsection要素を入れることはできないので、このマークアップ(記述)方法は誤ったものになります。

空の制限

br要素やhr要素などのように、コンテンツ・モデルの中には「空」と定義されている要素があります。これらの要素の中にはコンテンツを入れることはできません。

トランスペアレント

トランスペアレントとは、「コンテンツ・モデルとして透過である」という意味合いになりますが、「透明で見えない」ということではありません。これは、親要素のコンテンツ・モデルを子孫の要素が「継承する」ということなります。

例えば、要素Aの中に要素Bが含まれているとします。そして、要素Bのコンテンツ・モデルがトランスペアレントだとします。この場合、要素Aに入れてはいけない要素は、要素Bにも入れてはいけないということになります。要するに、要素Aのコンテンツ・モデルが、そのまま要素Bにも適用される(継承される)ということです。

■間違ったマークアップ例
  <em>
	<a href="#">
    	    <section>・・</section>
	</a>
  </em>
	

間違ったマークアップ例を見てみます。em要素の中にa要素を入れることは問題ありません。また、a要素の直下にsection要素を入れることも問題ありません。

では、この中からa要素の開始タグと終了タグを削除したとします。するとem要素の直下にsection要素が来ることになります。em要素のコンテンツ・モデルではセクショニング・コンテンツを入れることを禁止していますので、この記述は間違っていることになります。

コンテンツ・モデルがトランスペアレントとなる要素の中に入れても良い要素は、その要素のコンテンツ・モデルが何かによって変わります。

【HTML5の基礎知識3】