要素の配置ルールとカゴリー

要素の配置ルール
自分の中に配置できる要素（コンテンツ・モデル)
例＜P＞要素のコンテンツモデル
フレージング・コンテンツ
＜a＞＜abbr＞＜area＞＜audio＞＜b＞＜bdi＞＜bdo＞＜br＞＜button＞＜canvas＞＜cite＞
＜code＞＜data＞＜datalist＞＜del＞＜dfn＞＜em＞＜embed＞＜i＞＜iframe＞＜img＞＜input＞
＜ins＞＜kbd＞＜keygen＞＜label＞＜map＞＜make＞＜math＞＜meter＞＜noscript＞＜object＞・・・etc

コンテンツの分類

要素のカテゴリ

HTML５以前

・・・Block Level Elements と Inline Elements の２つに分かれていた

HTML５以降

７つのカテゴリーに分かれている

MetadataContentメタデータコンテンツ: ページの情報を指定する要素などが分類されている。基本的には画面に表示されない要素
FlowContentフローコンテンツ: body要素の中なら基本的にどこにでも配置できる要素分類されている。ほとんどの要素はこのフロー・コンテンツになる。
SectioningContentセクショニングコンテンツ: 章・節・項のようにアウトライン（階層構造）を形成する要素が分類されている。
HeadingContentヘッディングコンテンツ: 見出しを示す要素。
PhrasingContentフレージングコンテンツ: 主にテキストの一部に意味や役割を与える要素が分類されている。
EmbeddedContentエンベディッドコンテンツ: 外部のファイルや、HTML以外の言語で生成されたコンテンツを埋め込む要素が分類されている。
InteractiveContentインタラクティブコンテンツ: ユーザーが何かしらの操作（クリックなど）をすることができる要素が分類されている。

要素の分類コンテンツ・モデル HTML5リファレンス

各要素使用例

p要素

<p>
<p>何か・・・</p>
</p>
は可能か？
p要素のコンテンツ・モデルはフレージング・コンテンツ
フレージング・コンテンツだけが属している。
p要素のカテゴリーはフロー・コンテンツなので文法的に間違っている。

hx要素

<h2>
<p>何か・・・</p>
</h2>
は可能か？
hxの要素のコンテンツ・モデルはフレージング・コンテンツ
フレージング・コンテンツだけが属している。
p要素のカテゴリーはフロー・コンテンツなので文法的に間違っている。

head要素

<head>
<title>タイトルなになに<title>
<p>何か・・・</p>
</head>
は可能か？
head要素のコンテンツ・モデルはメタデータ・コンテンツ
メタデータ・コンテンツだけが属している。
title要素のカテゴリーはメタデータ・コンテンツなので可
p要素のカテゴリーはフロー・コンテンツなので文法的に間違っている。

div要素

<div>
<p>
<em>何か</em>おもしろいこと
<strong>次の文は</strong>楽しいこと </p>
</div>
は可能か？
div要素のコンテンツ・モデルはフロー・コンテンツ
p要素のカテゴリーはフロー・コンテンツなので属すことができる。
p要素のコンテンツ・モデルはフレージング・コンテンツ
<em>のカテゴリーはフレージング・コンテンツなので可
<strong>のカテゴリーもフレージング・コンテンツなので可

戻る04文字化け対策,目次,次へ06段落と見出し