カテゴリー

キーワード

 
> HTML5のコンテンツモデルって...

HTML5のコンテンツモデルって何?という方にオススメの記事です。


2015 年 2 月 13 日 投稿    view: 8735
タグ:
このエントリーをはてなブックマークに追加

HTMLコンテンツ・モデル

こんにちは。
本日はコンテンツ・モデルについてお話しさせていただきます。
よろしくお願いします。

コンテンツ・モデルとは

HTML5には、それ以前にあったブロック要素、インライン要素を、より細かく定義づけした「コンテンツ・モデル」という概念があります。

 

コンテンツ・モデルとはどの要素にどの様を入れてよいか定義したものです。

前回紹介したカテゴリーと混同しがちですが、

 

カテゴリーは、その要素がどこのカテゴリーに属しているか示したもので、

コンテンツ・モデルは、その要素がどのカテゴリーの要素を含んでよいか

 

ということを表したものです。

 

前回同様、これらを全て把握する必要はありません。(HTMLコーディングを始めて間もない方は特に)

 

実際にHTMLを記述し始めて思った通りにいかなくて、「この要素の中にあの要素は入れられるか」ということを確認したいとき、このページを再び訪れるという程度で構いません。

 

コンテンツ・モデル、5つの分類

コンテンツ・モデルは5つの分類分けができます。

 

1. 入れてよいカテゴリーが決まっている

前回紹介したカテゴリーの主要な7つのうち、どれかが入ります。
複数のカテゴリーを入れてよいというものもあります。

 

正しい例

<article>
	<section>テスト記事</section>
</article>

articleはフロー・コンテンツを含むことができる。
sectionはセクショニング・コンテンツかつフロー・コンテンツなので、正解

 

誤った例

<article> 
	<title>テスト記事</title>
</article>

 

articleはフロー・コンテンツを含むことができる。
titleはメタデータ・コンテンツなので誤り。

2. 何も入れてはいけない

終了タグがなく、brのように一つのタグだけで完結しているものです。

area, base, br, col, colgroup(span属性があるとき), embed,hr, img, imput, keygen, link, meta, param, script(src属性があるとき) , source, wbr

以上がそれに該当します。

 

3. 特定の要素が入る

カテゴリーにとらわれず、あらかじめ入る要素が決まっています。

正しい例

<table>
	<tbody>
		<tr>
			<td>テストテーブル</td>
		</tr>
	</tbody>
</table>

誤った例

<table>
	<tbody>
		<td>テストテーブル</td>
	</tbody>
</table>

table要素には少なくとも1個以上のtrが必要です。


4. トランスペアレント

transparentとはcssのbackground-colorのプロパティ値にもある通り、「透明」という意味です。

その言葉通り、親要素のタグを引き継ぎます。


正しい例

<div>
	<a>
		<p>テスト記事</p>
	</a>
</div>

divのコンテンツ・モデルはフロー・コンテンツなので、aもそれを引き継ぎます。
pはフロー・コンテンツなので正解


誤った例

<p>
	<a>
		<div>テスト記事</div>
	</a>
</p>

pのコンテンツ・モデルはフレージング・コンテンツなので、aもそれを引き継ぎます。
divはフロー・コンテンツなので、フレージング・コンテンツの中に入れることはできません。誤りです。


5. 子孫まで制限される

中(子要素)だけでなく、その中の中(孫要素)の要素にも入れてはいけないという制限があります。

すぐ下の要素ではなく、その中に入る要素まで制限します。

 

正しい例

<address>
	<span>テスト記事</span>
</address>

 

誤った例

<address>
	<div>
		<section>テスト記事</section>
	</div>
</address>

 

addressはフロー・コンテンツを含むことができる。
ただし、子孫にヘッディング・コンテンツ、セクショニング・コンテンツ、header 要素、footer 要素、address 要素を含むことはできない。
という決まりがあります。

 

正しい例
spanはフレージング・コンテンツかつフロー・コンテンツなので正解です。

誤った例
divはフロー・コンテンツですが、sectionはセクショニング・コンテンツかつフロー・コンテンツなので誤りです。

まとめ

HTMLをご存知の方は、大体の感覚で何をどこに入れてはいけないかわかっていると思います。
HTML5でも大きく変わったところはありませんが、新しいタグ要素がありますので、そこは押さえておいた方がよいと思います。

 

次回はコンテンツ・モデルの一覧表をまとめたいと思います。
(まとめました ⇒ コンテンツ・モデルの一覧表
参考にしていただければ幸いです。

 

最後までお読みいただきありがとうございました。

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事