2つの新概念!違いを知らないと、、、
HTML5では、HTML4.01でおなじみだったブロックレベル要素・インライン要素という定義がなくなりました。
代わりに登場したのが、カテゴリーという概念とコンテンツモデルという概念です。
で、始めてHTML5を学ぼうとした人は、この2つがゴチャゴチャになってしまうことが多い。
今日は、カテゴリーの意味とコンテンツモデルの意味にのみ、焦点をあててお話しします。
※内容は2014年2月段階の情報となります。
カテゴリーとは何か? コンテンツモデルとは何か?
2つの違いを押さえていただくため、まずは下記の定義をご覧ください。
- カテゴリー
- その要素が、
どんな内容を示すのに使われるか?を表す分類。
【例】link要素は「ページ上に表示されない文書情報を示すメタデータコンテンツという分類」 - コンテンツモデル
- その要素の中に、
どのカテゴリーの要素を入れられるか?を示すルール。(※例外も存在します)
両者の違いが分からないうちに、新要素カテゴリーの解説なんかを読んでしまうと、「???、、、なんかHTML5って難しいそうだからやーめたっ!」ということになってしまうのです。
カテゴリーとコンテンツモデルの例
例えば、h1要素のカテゴリーは、フローコンテンツであり、かつヘッディングコンテンツです。
これはh1要素が、
- 文書の本体に現れる一般的な内容を示すために使用される要素。
- 見出しを表す内容を示すために使用される要素。
上記2つの分類にあてはまることを示しています。
一方で、h1要素のコンテンツモデルはフレージングコンテンツになります。
このことは、h1要素の中に入れられる要素は、段落内で使用するようなコンテンツに使用される要素。
すなわち、
「a,
abbr,
area,
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,
meter,
noscript,
object,
output,
progress,
q,
ruby,
s,
samp,
script,
select,
small,
span,
strong,
sub,
sup,
textarea,
time,
u,
var,
video,
wbr,
テキスト, 」
といった要素が、h1の中に入れられるとルール付けされていることを意味します。
カテゴリーとコンテンツモデル。まずは違いを押さえた後に、どんなカテゴリーがあるのか?とか、コンテンツモデルの詳細などを知ることが大切です。
超多機能でSEOに強い!ブロガー・アフィリエイターを虜にするWPテーマDIVER
国内最速のサイト表示スピード!最新技術が詰め込まれたWPテーマTHE THOR