HTML5のカテゴリーとコンテンツモデルの違いとは?

カレンダーDate: | カテゴリーCategory:WordPressテーマのカスタマイズ方法【HTML・CSSの基礎も】
※景品表示法に基づく表記:本記事には商品の広告が含まれています

2つの新概念!違いを知らないと、、、

html5

HTML5では、HTML4.01でおなじみだったブロックレベル要素・インライン要素という定義がなくなりました。

代わりに登場したのが、カテゴリーという概念とコンテンツモデルという概念です。

で、始めてHTML5を学ぼうとした人は、この2つがゴチャゴチャになってしまうことが多い。

今日は、カテゴリーの意味とコンテンツモデルの意味にのみ、焦点をあててお話しします。

※内容は2014年2月段階の情報となります。

カテゴリーとは何か? コンテンツモデルとは何か?

2つの違いを押さえていただくため、まずは下記の定義をご覧ください。

カテゴリー
その要素が、
どんな内容を示すのに使われるか?を表す分類。
【例】link要素は「ページ上に表示されない文書情報を示すメタデータコンテンツという分類」
コンテンツモデル
その要素の中に、
どのカテゴリーの要素を入れられるか?を示すルール。(※例外も存在します)

両者の違いが分からないうちに、新要素カテゴリーの解説なんかを読んでしまうと、「???、、、なんかHTML5って難しいそうだからやーめたっ!」ということになってしまうのです。

カテゴリーとコンテンツモデルの例

例えば、h1要素のカテゴリーは、フローコンテンツであり、かつヘッディングコンテンツです。

これはh1要素が、

  1. 文書の本体に現れる一般的な内容を示すために使用される要素。
  2. 見出しを表す内容を示すために使用される要素。

上記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の中に入れられるとルール付けされていることを意味します。

カテゴリーとコンテンツモデル。まずは違いを押さえた後に、どんなカテゴリーがあるのか?とか、コンテンツモデルの詳細などを知ることが大切です。

Tags

Trackbacks & Comments

Trackback URL for this post:

Leave a Reply

flight